{"id":564,"date":"2018-06-12T16:21:53","date_gmt":"2018-06-12T16:21:53","guid":{"rendered":"https:\/\/www.fla-shop.com\/blog\/?p=564"},"modified":"2022-11-19T17:08:02","modified_gmt":"2022-11-19T17:08:02","slug":"adding-custom-javascript-to-the-map","status":"publish","type":"post","link":"https:\/\/www.fla-shop.com\/blog\/adding-custom-javascript-to-the-map\/","title":{"rendered":"Adding Custom JavaScript to the Map Plugin"},"content":{"rendered":"\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Enhancing capabilities of Map plugins for WordPress<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Our plugins are well-acclaimed for their extremely simple interface, so even a novice WordPress user can easily configure and embed an interactive map on his or her WordPress website. All settings are visual and do not require any coding. Settings cover colors, tooltips, adding points, grouping countries into regions, and other possibilities.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the post <a href=\"https:\/\/www.fla-shop.com\/blog\/5-types-of-interaction-in-plugin-us-map-for-wordpress\/\">&#8216;5 Features of the US Map for WordPress Plugin,&#8217;<\/a> you can find some examples of map interaction that even a complete rookie can implement.<br>At the same time, our maps have JavaScript API, so experienced developers can implement complex and non-standard usage scenarios for plugins. And now this gets even simpler thanks to the custom JavaScript code field already added into the plugin settings.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The following update refers to the following products: <a href=\"https:\/\/www.fla-shop.com\/products\/wp-plugins\/united-states\/us\/\">US Map for WP<\/a>, <a href=\"https:\/\/www.fla-shop.com\/products\/wp-plugins\/world\/countries\/\">World countries Map for WP<\/a>, as well as all single-level map plugins.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">How custom JavaScript works<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Custom JavaScript code is executed when the map is drawn for the first time. Any further redraws of the map do not trigger the execution. However, if you have multiple instances of the map on the same page, each one will execute its own custom JS code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the script, you can use any JS code, such as: executing standard or custom functions, reading and writing values of variables, parsing the HTML document, and whatever else. In addition, in the script you have access to the following variables:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code><strong>map<\/strong><\/code> \u2013 an instance of the map that provides access to public methods of the map class. This includes callback handlers that allow you to perform certain actions in response to certain events (see below).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can find the complete list of methods available to you <a href=\"https:\/\/docs.html5maps.com\/html5-locator-maps\/api\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code><strong>containerId<\/strong><\/code> \u2013 this variable holds the HTML id of the container the map is placed to.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Example:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n map.on(&#039;click&#039;, function (event, sid, map) {\n \u00a0\u00a0\u00a0var name = map.fetchStateAttr(sid, &#039;name&#039;);\n \u00a0\u00a0\u00a0console.log(&#039;Clicked state is: &#039; + name);\n });\n<\/pre><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">How to add custom JavaScript to the map<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open map settings and switch to the &#8216;Tools&#8217; tab. Scroll down to the Custom JavaScript section:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2018\/06\/custom-js.png\" alt=\"Custom JS\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can insert custom JavaScript code in the corresponding textbox. Click the &#8216;Save Changes&#8217; button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is what the above example code does. It fetches the name of the state on the map that a user has clicked and prints that name to the console.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">What can you do with custom JavaScript?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Since you have access to most of the map object methods as well as to the HTML of the page, you can do almost anything. Let\u2019s review some basic functions provided by the map object:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Callback functions<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">By using the <code>FlaMap.on<\/code> method you can assign a callback function to certain events including: on click, on double click, on mouse move, on mouse in, on mouse out, on mouse button down, and on mouse button up.<br>The callback function receives the original event that triggered the callback; the state id corresponding to the event (for example, if the event is a click, the function receives the id of the clicked state); the map object.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Map state manipulation<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The map object provides a number of ways to view or modify various state settings: name, color, label, is a state is shown or hidden and is a state is enabled or not. You can also modify the URL assigned to a specific state.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Points manipulation<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Map points are used to mark various objects on the map: headquarters, dealership network sites, local offices, and so on. Using custom JavaScript, you can track clicks on points, as well as change their parameters: label, color, size, coordinates, and assigned URL.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Map drawing and overall appearance<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can adjust the general settings of the map and initiate redrawing using the <code>map.reloadMap()<\/code> method.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Please refer to the <a href=\"https:\/\/docs.html5maps.com\/html5-locator-maps\/api\">documentation<\/a> on the complete list and description of <code>FlaMap<\/code> methods.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Examples of use<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Auto-fill forms<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A map combined with a form can simplify filling in the data for a user.<br>For example, if a form has such fields as State or Country, then normally a user would have to manually type or select these values from the dropdown. With a map enhanced with custom JS code, you can simplify this down to just one click on the map.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">What you need is to write a callback function and pass it to the <code>FlaMap.on<\/code> method. In the callback function, you fetch the name of the clicked state\/country and insert the corresponding state\/country values into the form.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Select multiple states<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you need to give your visitor the possibility to select multiple states, using custom JavaScript can help. We have reviewed a similar example for non-WordPress maps here: <a href=\"https:\/\/www.fla-shop.com\/howto\/interacting-with-maps-via-checkboxes\/\">https:\/\/www.fla-shop.com\/howto\/interacting-with-maps-via-checkboxes\/<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tracking clicks on states in Google Analytics<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A common use case of our map plugins is displaying a dealership map for a given country or state. When a state or a country is clicked on the map, the corresponding contact information displays side-by-side with the map. And now, if you want to know how often this or that state or country is clicked and see this info in Google Analytics, you can use custom JavaScript to integrate the map to GA and therefore see the map click data.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Specifically, you need to invoke Google Analytics scripts (analytics.js, gtag.js, etc) from your custom JS code.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">As you see, custom JavaScript added to the interactive map can greatly enhance its basic functionality. Enjoy!<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><a class=\"greenbutton\" href=\"https:\/\/www.fla-shop.com\/products\/wp-plugins\/united-states\/us\/\">Try United States map for WordPress for free<\/a><\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>As of version 2.9.9.6, our WordPress map plugins support a new advanced feature. Now you can add custom JavaScript code to the map. This code executes after the map is drawn and has access to most of map\u2019s properties. Thanks to this feature you can implement all kinds of interactive behavior previously impossible or hard to do.<\/p>\n","protected":false},"author":1,"featured_media":1357,"comment_status":"open","ping_status":"open","sticky":false,"template":"post1.php","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[40],"tags":[],"class_list":["post-564","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-empowerment-with-custom-js"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Adding Custom JavaScript to the Map Plugin - Fla-Shop.com<\/title>\n<meta name=\"description\" content=\"Extending the capabilities of the WordPress plugin with maps by adding JS code.\" \/>\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.fla-shop.com\/blog\/adding-custom-javascript-to-the-map\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Custom JavaScript to the Map Plugin - Fla-Shop.com\" \/>\n<meta property=\"og:description\" content=\"Extending the capabilities of the WordPress plugin with maps by adding JS code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fla-shop.com\/blog\/adding-custom-javascript-to-the-map\/\" \/>\n<meta property=\"og:site_name\" content=\"Fla-Shop.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/flashopcom\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-12T16:21:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-19T17:08:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2018\/06\/map-javascript-api.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@flashop\" \/>\n<meta name=\"twitter:site\" content=\"@flashop\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/adding-custom-javascript-to-the-map\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/adding-custom-javascript-to-the-map\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#\\\/schema\\\/person\\\/16214725e757dd92d37dbfe3e2a5db1e\"},\"headline\":\"Adding Custom JavaScript to the Map Plugin\",\"datePublished\":\"2018-06-12T16:21:53+00:00\",\"dateModified\":\"2022-11-19T17:08:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/adding-custom-javascript-to-the-map\\\/\"},\"wordCount\":896,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/adding-custom-javascript-to-the-map\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/map-javascript-api.png\",\"articleSection\":[\"Empowerment with Custom JS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/adding-custom-javascript-to-the-map\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/adding-custom-javascript-to-the-map\\\/\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/adding-custom-javascript-to-the-map\\\/\",\"name\":\"Adding Custom JavaScript to the Map Plugin - Fla-Shop.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/adding-custom-javascript-to-the-map\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/adding-custom-javascript-to-the-map\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/map-javascript-api.png\",\"datePublished\":\"2018-06-12T16:21:53+00:00\",\"dateModified\":\"2022-11-19T17:08:02+00:00\",\"description\":\"Extending the capabilities of the WordPress plugin with maps by adding JS code.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/adding-custom-javascript-to-the-map\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/adding-custom-javascript-to-the-map\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/adding-custom-javascript-to-the-map\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/map-javascript-api.png\",\"contentUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/map-javascript-api.png\",\"width\":1200,\"height\":630,\"caption\":\"Map JavaScript API\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/adding-custom-javascript-to-the-map\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding Custom JavaScript to the Map Plugin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/\",\"name\":\"Fla-Shop.com\",\"description\":\"Interactive Maps, HTML5, WordPress, Map Use-cases \u2013 Fla-shop.com blog\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#organization\",\"name\":\"Fla-shop.com\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/fla-shop_twitter_logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/fla-shop_twitter_logo.jpg\",\"width\":128,\"height\":128,\"caption\":\"Fla-shop.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/flashopcom\\\/\",\"https:\\\/\\\/x.com\\\/flashop\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/flashopcom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#\\\/schema\\\/person\\\/16214725e757dd92d37dbfe3e2a5db1e\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding Custom JavaScript to the Map Plugin - Fla-Shop.com","description":"Extending the capabilities of the WordPress plugin with maps by adding JS code.","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.fla-shop.com\/blog\/adding-custom-javascript-to-the-map\/","og_locale":"en_US","og_type":"article","og_title":"Adding Custom JavaScript to the Map Plugin - Fla-Shop.com","og_description":"Extending the capabilities of the WordPress plugin with maps by adding JS code.","og_url":"https:\/\/www.fla-shop.com\/blog\/adding-custom-javascript-to-the-map\/","og_site_name":"Fla-Shop.com","article_publisher":"https:\/\/www.facebook.com\/flashopcom\/","article_published_time":"2018-06-12T16:21:53+00:00","article_modified_time":"2022-11-19T17:08:02+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2018\/06\/map-javascript-api.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_creator":"@flashop","twitter_site":"@flashop","twitter_misc":{"Written by":"admin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fla-shop.com\/blog\/adding-custom-javascript-to-the-map\/#article","isPartOf":{"@id":"https:\/\/www.fla-shop.com\/blog\/adding-custom-javascript-to-the-map\/"},"author":{"name":"admin","@id":"https:\/\/www.fla-shop.com\/blog\/#\/schema\/person\/16214725e757dd92d37dbfe3e2a5db1e"},"headline":"Adding Custom JavaScript to the Map Plugin","datePublished":"2018-06-12T16:21:53+00:00","dateModified":"2022-11-19T17:08:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fla-shop.com\/blog\/adding-custom-javascript-to-the-map\/"},"wordCount":896,"commentCount":1,"publisher":{"@id":"https:\/\/www.fla-shop.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fla-shop.com\/blog\/adding-custom-javascript-to-the-map\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2018\/06\/map-javascript-api.png","articleSection":["Empowerment with Custom JS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fla-shop.com\/blog\/adding-custom-javascript-to-the-map\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fla-shop.com\/blog\/adding-custom-javascript-to-the-map\/","url":"https:\/\/www.fla-shop.com\/blog\/adding-custom-javascript-to-the-map\/","name":"Adding Custom JavaScript to the Map Plugin - Fla-Shop.com","isPartOf":{"@id":"https:\/\/www.fla-shop.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fla-shop.com\/blog\/adding-custom-javascript-to-the-map\/#primaryimage"},"image":{"@id":"https:\/\/www.fla-shop.com\/blog\/adding-custom-javascript-to-the-map\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2018\/06\/map-javascript-api.png","datePublished":"2018-06-12T16:21:53+00:00","dateModified":"2022-11-19T17:08:02+00:00","description":"Extending the capabilities of the WordPress plugin with maps by adding JS code.","breadcrumb":{"@id":"https:\/\/www.fla-shop.com\/blog\/adding-custom-javascript-to-the-map\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fla-shop.com\/blog\/adding-custom-javascript-to-the-map\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fla-shop.com\/blog\/adding-custom-javascript-to-the-map\/#primaryimage","url":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2018\/06\/map-javascript-api.png","contentUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2018\/06\/map-javascript-api.png","width":1200,"height":630,"caption":"Map JavaScript API"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fla-shop.com\/blog\/adding-custom-javascript-to-the-map\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.fla-shop.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Adding Custom JavaScript to the Map Plugin"}]},{"@type":"WebSite","@id":"https:\/\/www.fla-shop.com\/blog\/#website","url":"https:\/\/www.fla-shop.com\/blog\/","name":"Fla-Shop.com","description":"Interactive Maps, HTML5, WordPress, Map Use-cases \u2013 Fla-shop.com blog","publisher":{"@id":"https:\/\/www.fla-shop.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fla-shop.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fla-shop.com\/blog\/#organization","name":"Fla-shop.com","url":"https:\/\/www.fla-shop.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fla-shop.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2017\/06\/fla-shop_twitter_logo.jpg","contentUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2017\/06\/fla-shop_twitter_logo.jpg","width":128,"height":128,"caption":"Fla-shop.com"},"image":{"@id":"https:\/\/www.fla-shop.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/flashopcom\/","https:\/\/x.com\/flashop","https:\/\/www.youtube.com\/user\/flashopcom"]},{"@type":"Person","@id":"https:\/\/www.fla-shop.com\/blog\/#\/schema\/person\/16214725e757dd92d37dbfe3e2a5db1e","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g","caption":"admin"}}]}},"_links":{"self":[{"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts\/564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/comments?post=564"}],"version-history":[{"count":14,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts\/564\/revisions"}],"predecessor-version":[{"id":1859,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts\/564\/revisions\/1859"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/media\/1357"}],"wp:attachment":[{"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/media?parent=564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/categories?post=564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/tags?post=564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}