{"id":4586,"date":"2023-02-26T09:50:58","date_gmt":"2023-02-26T08:50:58","guid":{"rendered":"https:\/\/www.open-user-map.com\/?post_type=ht_kb&p=4586"},"modified":"2024-11-10T17:26:59","modified_gmt":"2024-11-10T16:26:59","slug":"trigger-map-actions-with-javascript","status":"publish","type":"ht_kb","link":"https:\/\/www.open-user-map.com\/fr\/knowledge-base\/trigger-map-actions-with-javascript\/","title":{"rendered":"D\u00e9clencher des actions sur la carte avec Javascript"},"content":{"rendered":"\n

You can trigger a number of Javascript functions. It is possible to add custom JS directly in the plugin settings. Go to Open User Map > Settings > Advanced > Custom JS<\/em>. <\/p>\n\n\n\n

Here are some possible use cases:<\/p>\n\n\n\n

<\/div>\n\n\n\n

Reload the map<\/h2>\n\n\n\n

This may be helpful if you are using a Caching or Page Preloading Plugin. Sometimes the preloading blocks the loading of the OUM map, so that it needs to be reloaded.<\/p>\n\n\n\n

JavaScript<\/span><\/path><\/path><\/svg><\/span>
oumMap.<\/span>invalidateSize<\/span>();<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/div>\n\n\n\n
Fly to another location<\/h2>\n\n\n\n
Use the following JS function after your page has loaded. The necessary parameters are latitude, longitude and zoom.<\/p>\n\n\n\n
JavaScript<\/span><\/path><\/path><\/svg><\/span>
oumMap.<\/span>flyTo<\/span>([<\/span>40.737<\/span>, <\/span>-<\/span>73.923<\/span>], <\/span>8<\/span>);<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/div>\n\n\n\n
Fly to the current user position<\/h2>\n\n\n\n
Use the following JS function to trigger a click on the “Show me where I am” Button.<\/p>\n\n\n\n
JavaScript<\/span><\/path><\/path><\/svg><\/span>
document.<\/span>querySelector<\/span>(<\/span>'<\/span>.leaflet-control-locate a<\/span>'<\/span>).<\/span>click<\/span>();<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/div>\n\n\n\n
Open the “Add location” form<\/h2>\n\n\n\n
Use the following JS function to trigger a click on the “+” Button to open the “Add location” form.<\/p>\n\n\n\n
JavaScript<\/span><\/path><\/path><\/svg><\/span>
jQuery<\/span>(document).<\/span>ready<\/span>(<\/span>function<\/span>() {<\/span><\/span>\n  document.<\/span>querySelector<\/span>(<\/span>'<\/span>#open-add-location-overlay<\/span>'<\/span>).<\/span>click<\/span>();<\/span><\/span>\n});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/div>\n\n\n\n
Activate\/Deactivate a Marker Category<\/h2>\n\n\n\n
Use the following JS function to trigger a click on a marker category. The number (e.g. “3”) is the position of the category in the category list. <\/p>\n\n\n\n
JavaScript<\/span><\/path><\/path><\/svg><\/span>
jQuery<\/span>(document).<\/span>ready<\/span>(<\/span>function<\/span>() {<\/span><\/span>\n  document.<\/span>querySelector<\/span>(<\/span>'<\/span>.oum-filter-list label:nth-of-type(3)<\/span>'<\/span>).<\/span>click<\/span>();<\/span><\/span>\n});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/div>\n\n\n\n
To activate or deactivate all marker categories at the same time you can use this snippet:<\/p>\n\n\n\n
JavaScript<\/span><\/path><\/path><\/svg><\/span>
jQuery<\/span>(document).<\/span>ready<\/span>(<\/span>function<\/span>() {<\/span><\/span>\n  document.<\/span>querySelectorAll<\/span>(<\/span>'<\/span>.oum-filter-list label<\/span>'<\/span>).<\/span>forEach<\/span>((<\/span>category<\/span>) <\/span>=><\/span> {<\/span><\/span>\n    category.<\/span>click<\/span>()<\/span><\/span>\n  });<\/span><\/span>\n});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/div>\n\n\n\n
To activate a specific marker category on page load you can use this snippet. Just add the parameter ?oum-category=3 to your URL on page load. The number (e.g. “3”) is the position of the category in the category list. See this example<\/a>.<\/p>\n\n\n\n
JavaScript<\/span><\/path><\/path><\/svg><\/span>
\/\/ Function to get the value of a specific URL parameter<\/span><\/span>\nfunction<\/span> <\/span>getQueryParam<\/span>(<\/span>param<\/span>) {<\/span><\/span>\n  <\/span>const<\/span> urlParams <\/span>=<\/span> <\/span>new<\/span> <\/span>URLSearchParams<\/span>(window.location.search);<\/span><\/span>\n  <\/span>return<\/span> urlParams.<\/span>get<\/span>(param);<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n\/\/ Get the 'oum-category' parameter value from the URL<\/span><\/span>\nconst<\/span> categoryNumber <\/span>=<\/span> <\/span>getQueryParam<\/span>(<\/span>'<\/span>oum-category<\/span>'<\/span>);<\/span><\/span>\n  <\/span><\/span>\n\/\/ Check if the 'oum-category' parameter is present<\/span><\/span>\nif<\/span> (categoryNumber <\/span>!==<\/span> <\/span>null<\/span>) {<\/span><\/span>\n  <\/span>\/\/ Click all categories first<\/span><\/span>\n  document.<\/span>querySelectorAll<\/span>(<\/span>'<\/span>.oum-filter-list label<\/span>'<\/span>).<\/span>forEach<\/span>((<\/span>category<\/span>) <\/span>=><\/span> {<\/span><\/span>\n    category.<\/span>click<\/span>();<\/span><\/span>\n  });<\/span><\/span>\n<\/span>\n  <\/span>\/\/ Click specifically on the label based on the 'oum-category' value<\/span><\/span>\n  <\/span>\/\/ Convert categoryNumber to a 1-based index for :nth-child() selector<\/span><\/span>\n  <\/span>const<\/span> categoryIndex <\/span>=<\/span> <\/span>parseInt<\/span>(categoryNumber, <\/span>10<\/span>);<\/span><\/span>\n  <\/span>if<\/span> (<\/span>!<\/span>isNaN<\/span>(categoryIndex)) { <\/span>\/\/ Ensure categoryNumber is a valid number<\/span><\/span>\n    <\/span>const<\/span> targetLabel <\/span>=<\/span> document.<\/span>querySelector<\/span>(<\/span>`.oum-filter-list label:nth-of-type(<\/span>${<\/span>categoryIndex<\/span>}<\/span>)`<\/span>);<\/span><\/span>\n    <\/span>if<\/span> (targetLabel) {<\/span><\/span>\n      targetLabel.<\/span>click<\/span>();<\/span><\/span>\n    } <\/span>else<\/span> {<\/span><\/span>\n      console.<\/span>error<\/span>(<\/span>'<\/span>Specified category index is out of range.<\/span>'<\/span>);<\/span><\/span>\n    }<\/span><\/span>\n  } <\/span>else<\/span> {<\/span><\/span>\n    console.<\/span>error<\/span>(<\/span>'<\/span>Invalid category number specified in the URL parameter.<\/span>'<\/span>);<\/span><\/span>\n  }<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/div>\n\n\n\n
Auto-populate the subtitle field<\/h2>\n\n\n\n
When the user searches and clicks on a suggested address in the “Add Location” form, the subtitle field can be automatically populated with the name of that location:<\/p>\n\n\n\n
JavaScript<\/span><\/path><\/path><\/svg><\/span>
oumMap2.<\/span>addEventListener<\/span>(<\/span>'<\/span>geosearch\/showlocation<\/span>'<\/span>, <\/span>function<\/span>(<\/span>e<\/span>) { <\/span><\/span>\n  document.<\/span>querySelector<\/span>(<\/span>'<\/span>#oum_location_address<\/span>'<\/span>).value <\/span>=<\/span> e.location.label;<\/span><\/span>\n});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/div>\n","protected":false},"excerpt":{"rendered":"
Vous pouvez d\u00e9clencher un certain nombre de fonctions Javascript. Il est possible d'ajouter des JS personnalis\u00e9s directement dans les param\u00e8tres du plugin. Allez dans Open User Map > Settings > Advanced > Custom JS. Voici quelques cas d'utilisation possibles : Recharger la carte Cela peut \u00eatre utile si vous utilisez un plugin de mise en cache ou de pr\u00e9chargement de page. ... Suite<\/a><\/p>","protected":false},"author":50,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[25],"ht-kb-tag":[29,76,75,74,77,78],"class_list":["post-4586","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-customization","ht_kb_tag-automation","ht_kb_tag-cache","ht_kb_tag-current-location","ht_kb_tag-js","ht_kb_tag-preloading","ht_kb_tag-rocket"],"yoast_head":"\nTrigger map actions with Javascript - Open User Map<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.open-user-map.com\/fr\/knowledge-base\/trigger-map-actions-with-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Trigger map actions with Javascript - Open User Map\" \/>\n<meta property=\"og:description\" content=\"You can trigger a number of Javascript functions. It is possible to add custom JS directly in the plugin settings. Go to Open User Map > Settings > Advanced > Custom JS. Here are some possible use cases: Reload the map This may be helpful if you are using a Caching or Page Preloading Plugin. … Continued\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.open-user-map.com\/fr\/knowledge-base\/trigger-map-actions-with-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Open User Map\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-10T16:26:59+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/trigger-map-actions-with-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/trigger-map-actions-with-javascript\\\/\"},\"author\":{\"name\":\"Daniel Sch\u00f6nherr\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#\\\/schema\\\/person\\\/d9c8cbe470ae2702b6de61e0f73a7402\"},\"headline\":\"Trigger map actions with Javascript\",\"datePublished\":\"2023-02-26T08:50:58+00:00\",\"dateModified\":\"2024-11-10T16:26:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/trigger-map-actions-with-javascript\\\/\"},\"wordCount\":275,\"publisher\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#organization\"},\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/trigger-map-actions-with-javascript\\\/\",\"url\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/trigger-map-actions-with-javascript\\\/\",\"name\":\"Trigger map actions with Javascript - Open User Map\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#website\"},\"datePublished\":\"2023-02-26T08:50:58+00:00\",\"dateModified\":\"2024-11-10T16:26:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/trigger-map-actions-with-javascript\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/trigger-map-actions-with-javascript\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/trigger-map-actions-with-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.open-user-map.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Trigger map actions with Javascript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#website\",\"url\":\"https:\\\/\\\/www.open-user-map.com\\\/\",\"name\":\"Open User Map\",\"description\":\"WordPress Map Plugin\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.open-user-map.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#organization\",\"name\":\"Open User Map\",\"url\":\"https:\\\/\\\/www.open-user-map.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.open-user-map.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/icon-256x256-1.png\",\"contentUrl\":\"https:\\\/\\\/www.open-user-map.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/icon-256x256-1.png\",\"width\":256,\"height\":256,\"caption\":\"Open User Map\"},\"image\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#\\\/schema\\\/person\\\/d9c8cbe470ae2702b6de61e0f73a7402\",\"name\":\"Daniel Sch\u00f6nherr\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"D\u00e9clencher des actions de carte avec JavaScript - Open User Map","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.open-user-map.com\/fr\/knowledge-base\/trigger-map-actions-with-javascript\/","og_locale":"fr_FR","og_type":"article","og_title":"Trigger map actions with Javascript - Open User Map","og_description":"You can trigger a number of Javascript functions. It is possible to add custom JS directly in the plugin settings. Go to Open User Map > Settings > Advanced > Custom JS. Here are some possible use cases: Reload the map This may be helpful if you are using a Caching or Page Preloading Plugin. … Continued","og_url":"https:\/\/www.open-user-map.com\/fr\/knowledge-base\/trigger-map-actions-with-javascript\/","og_site_name":"Open User Map","article_modified_time":"2024-11-10T16:26:59+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/www.open-user-map.com\/knowledge-base\/trigger-map-actions-with-javascript\/#article","isPartOf":{"@id":"https:\/\/www.open-user-map.com\/knowledge-base\/trigger-map-actions-with-javascript\/"},"author":{"name":"Daniel Sch\u00f6nherr","@id":"https:\/\/www.open-user-map.com\/#\/schema\/person\/d9c8cbe470ae2702b6de61e0f73a7402"},"headline":"Trigger map actions with Javascript","datePublished":"2023-02-26T08:50:58+00:00","dateModified":"2024-11-10T16:26:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.open-user-map.com\/knowledge-base\/trigger-map-actions-with-javascript\/"},"wordCount":275,"publisher":{"@id":"https:\/\/www.open-user-map.com\/#organization"},"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/www.open-user-map.com\/knowledge-base\/trigger-map-actions-with-javascript\/","url":"https:\/\/www.open-user-map.com\/knowledge-base\/trigger-map-actions-with-javascript\/","name":"D\u00e9clencher des actions de carte avec JavaScript - Open User Map","isPartOf":{"@id":"https:\/\/www.open-user-map.com\/#website"},"datePublished":"2023-02-26T08:50:58+00:00","dateModified":"2024-11-10T16:26:59+00:00","breadcrumb":{"@id":"https:\/\/www.open-user-map.com\/knowledge-base\/trigger-map-actions-with-javascript\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.open-user-map.com\/knowledge-base\/trigger-map-actions-with-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.open-user-map.com\/knowledge-base\/trigger-map-actions-with-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.open-user-map.com\/"},{"@type":"ListItem","position":2,"name":"Trigger map actions with Javascript"}]},{"@type":"WebSite","@id":"https:\/\/www.open-user-map.com\/#website","url":"https:\/\/www.open-user-map.com\/","name":"Open User Map","description":"Plugin WordPress Map","publisher":{"@id":"https:\/\/www.open-user-map.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.open-user-map.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.open-user-map.com\/#organization","name":"Open User Map","url":"https:\/\/www.open-user-map.com\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.open-user-map.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.open-user-map.com\/wp-content\/uploads\/2023\/09\/icon-256x256-1.png","contentUrl":"https:\/\/www.open-user-map.com\/wp-content\/uploads\/2023\/09\/icon-256x256-1.png","width":256,"height":256,"caption":"Open User Map"},"image":{"@id":"https:\/\/www.open-user-map.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.open-user-map.com\/#\/schema\/person\/d9c8cbe470ae2702b6de61e0f73a7402","name":"Daniel Sch\u00f6nherr"}]}},"_links":{"self":[{"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/ht-kb\/4586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/users\/50"}],"replies":[{"embeddable":true,"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/comments?post=4586"}],"version-history":[{"count":0,"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/ht-kb\/4586\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/media?parent=4586"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/ht-kb-category?post=4586"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/ht-kb-tag?post=4586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}