{"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\/de\/knowledge-base\/trigger-map-actions-with-javascript\/","title":{"rendered":"Ausl\u00f6sen von Kartenaktionen mit Javascript"},"content":{"rendered":"

Sie k\u00f6nnen eine Reihe von Javascript-Funktionen ausl\u00f6sen. Es ist m\u00f6glich, benutzerdefiniertes JS direkt in den Plugin-Einstellungen hinzuzuf\u00fcgen. Gehen Sie zu \u00d6ffnen Sie User Map > Einstellungen > Erweitert > Custom JS<\/em>. <\/p>\n\n\n\n

Hier sind einige m\u00f6gliche Anwendungsf\u00e4lle:<\/p>\n\n\n\n

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

Laden Sie die Karte neu<\/h2>\n\n\n\n

Dies kann hilfreich sein, wenn Sie ein Caching- oder Page-Preloading-Plugin verwenden. Manchmal blockiert das Vorladen das Laden der OUM-Karte, so dass sie neu geladen werden muss.<\/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
Zu einem anderen Ort fliegen<\/h2>\n\n\n\n
Verwenden Sie die folgende JS-Funktion, nachdem Ihre Seite geladen wurde. Die erforderlichen Parameter sind Breitengrad, L\u00e4ngengrad und 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
Fliegen zur aktuellen Benutzerposition<\/h2>\n\n\n\n
Verwenden Sie die folgende JS-Funktion, um einen Klick auf die Schaltfl\u00e4che \"Zeige mir, wo ich bin\" auszul\u00f6sen.<\/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
\u00d6ffnen Sie das Formular \"Ort hinzuf\u00fcgen\".<\/h2>\n\n\n\n
Verwenden Sie die folgende JS-Funktion, um einen Klick auf die \"+\"-Schaltfl\u00e4che auszul\u00f6sen, um das Formular \"Ort hinzuf\u00fcgen\" zu \u00f6ffnen.<\/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
Aktivieren\/Deaktivieren einer Markierungskategorie<\/h2>\n\n\n\n
Verwenden Sie die folgende JS-Funktion, um einen Klick auf eine Markierungskategorie auszul\u00f6sen. Die Zahl (z. B. \"3\") ist die Position der Kategorie in der Kategorieliste. <\/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
Um alle Markierungskategorien gleichzeitig zu aktivieren oder zu deaktivieren, k\u00f6nnen Sie dieses Snippet verwenden:<\/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
Um eine bestimmte Markerkategorie beim Laden der Seite zu aktivieren, k\u00f6nnen Sie dieses Snippet verwenden. F\u00fcgen Sie einfach beim Laden der Seite den Parameter ?oum-category=3 in Ihre URL ein. Die Zahl (z. B. \"3\") steht f\u00fcr die Position der Kategorie in der Kategorieliste. Siehe dieses Beispiel<\/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
Automatisches Ausf\u00fcllen des Feldes f\u00fcr den Untertitel<\/h2>\n\n\n\n
Wenn der Benutzer eine vorgeschlagene Adresse im Formular \"Ort hinzuf\u00fcgen\" sucht und anklickt, kann das Feld \"Untertitel\" automatisch mit dem Namen des Ortes ausgef\u00fcllt werden:<\/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>","protected":false},"excerpt":{"rendered":"
Sie k\u00f6nnen eine Reihe von Javascript-Funktionen ausl\u00f6sen. Es ist m\u00f6glich, benutzerdefiniertes JS direkt in den Plugin-Einstellungen hinzuzuf\u00fcgen. Gehen Sie zu Open User Map > Einstellungen > Erweitert > Benutzerdefiniertes JS. Hier sind einige m\u00f6gliche Anwendungsf\u00e4lle: Die Karte neu laden Dies kann hilfreich sein, wenn Sie ein Caching- oder Page Preloading-Plugin verwenden. ... Fortsetzung<\/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\/de\/knowledge-base\/trigger-map-actions-with-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\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\/de\/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=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"2\u00a0Minuten\" \/>\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\":\"de\"},{\"@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\":\"de\",\"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\":\"de\"},{\"@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\":\"de\",\"@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":"Ausl\u00f6sen von Kartenaktionen mit 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\/de\/knowledge-base\/trigger-map-actions-with-javascript\/","og_locale":"de_DE","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\/de\/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":{"Gesch\u00e4tzte Lesezeit":"2\u00a0Minuten"},"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":"de"},{"@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":"Ausl\u00f6sen von Kartenaktionen mit 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":"de","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 Karten-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":"de"},{"@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":"de","@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\/de\/wp-json\/wp\/v2\/ht-kb\/4586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/users\/50"}],"replies":[{"embeddable":true,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/comments?post=4586"}],"version-history":[{"count":0,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/ht-kb\/4586\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/media?parent=4586"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/ht-kb-category?post=4586"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/ht-kb-tag?post=4586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}