{"id":879,"date":"2019-01-04T19:47:36","date_gmt":"2019-01-04T19:47:36","guid":{"rendered":"https:\/\/www.fla-shop.com\/blog\/?p=879"},"modified":"2022-11-16T11:33:12","modified_gmt":"2022-11-16T11:33:12","slug":"examples-of-custom-js-scripts","status":"publish","type":"post","link":"https:\/\/www.fla-shop.com\/blog\/examples-of-custom-js-scripts\/","title":{"rendered":"Real Examples Of Custom JS Scripts For WordPress Maps"},"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<p>For the purpose of this read, we will be looking at how to add custom JS to your interactive maps, along with some real examples to help get you started. So without further ado, let&#8217;s get started!<\/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\">Which Plugins Are Compatible With Custom JS?<\/h2>\n\n\n\n<p>Custom JS scripting is currently supported by all the single-level premium plugins like the <a href=\"https:\/\/www.fla-shop.com\/products\/wp-plugins\/united-states\/us\/\">US map<\/a>, <a href=\"https:\/\/www.fla-shop.com\/products\/wp-plugins\/world\/countries\/\">World Map<\/a>, and so on.<\/p>\n\n\n\n<p>You will find plenty of examples of JS codes on Fla-shop.com&#8217;s site which you can use to enhance the functionality of your interactive maps.<\/p>\n\n\n\n<p>Here is an example showing how it is done:&nbsp;<\/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\">Example \u2013 Highlighting A State When It Is Clicked<\/h2>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_lg_block\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\"> <!-- start Fla-shop.com HTML5 Map --> <div class='usaHtml5Mapright htmlMapResponsive' style='max-width:980px; width: 100%'><div id='usa-html5-map-map-container_0' class='usaHtml5MapContainer' data-map-variable='usahtml5map_map_0'><\/div> <style> #usa-html5-map-map-container_0 { } #usa-html5-map-map-container_0 .fm-tooltip-name { color: #000000; font-size: 20px; } #usa-html5-map-map-container_0 .fm-tooltip-comment { } #usa-html5-map-map-container_0 .fm-tooltip-comment p { } @media only screen and (max-width: 480px) { #usa-html5-map-map-container_0 { float: none; width: 100%; } } <\/style><script type=\"text\/javascript\"> jQuery(function(){ var hightlighted = null; usahtml5map_map_0 = new FlaShopUSAMap(usahtml5map_map_cfg_8); usahtml5map_map_0.draw('usa-html5-map-map-container_0'); usahtml5map_map_0.on('mousein', function(ev, sid, map) { if (hightlighted && sid != hightlighted) { map.stateHighlightOut(hightlighted); hightlighted = null; } }); (function (map, containerId, mapId) { var selected = null; map.on('click', function(ev, sid, map) { var was_selected = !!selected; if (selected && selected != sid) { map.stateHighlightOff(selected); selected = null; } var link = map.fetchStateAttr(sid, 'link'); if (link === '#info') { if (sid !== selected) map.stateHighlightOn(sid, '#FF0000', '#FFFFFF'); selected = sid; } if (!selected && was_selected) { jQuery('#'+containerId).parent().find('.usaHtml5MapStateInfo').html(''); } }); })(usahtml5map_map_0, 'usa-html5-map-map-container_0', 8); var html5map_onclick = function(ev, sid, map) { var cfg = usahtml5map_map_cfg_8; var link = map.fetchStateAttr(sid, 'link'); var is_group = map.fetchStateAttr(sid, 'group'); var popup_id = map.fetchStateAttr(sid, 'popup-id'); var is_group_info = false; if (typeof cfg.map_data[sid] !== 'undefined') jQuery('#usa-html5-map-selector_0').val(sid); else jQuery('#usa-html5-map-selector_0').val(''); if (is_group==undefined) { if (sid.substr(0,1)=='p') { popup_id = map.fetchPointAttr(sid, 'popup_id'); link = map.fetchPointAttr(sid, 'link'); } } else if (typeof cfg.groups[is_group]['ignore_link'] == 'undefined' || ! cfg.groups[is_group].ignore_link) { link = cfg.groups[is_group].link; popup_id = cfg.groups[is_group]['popup_id']; is_group_info = true; } if (link=='#popup') { if (typeof SG_POPUP_DATA == \"object\") { if (popup_id in SG_POPUP_DATA) { SGPopup.prototype.showPopup(popup_id,false); } else { jQuery.ajax({ type: 'POST', url: 'https:\/\/www.fla-shop.com\/blog\/' + 'index.php' + '?map_id=8' + '&usahtml5map_get_popup', data: {popup_id:popup_id}, }).done(function(data) { jQuery('body').append(data); SGPopup.prototype.showPopup(popup_id,false); }); } } else if (typeof SGPBPopup == \"function\") { var popup = SGPBPopup.createPopupObjById(popup_id); popup.prepareOpen(); popup.open(); } return false; } if (link == '#info') { var id = is_group_info ? is_group : (sid.substr(0,1)=='p' ? sid : map.fetchStateAttr(sid, 'id')); jQuery('#usa-html5-map-state-info_0').html('Loading...'); jQuery.ajax({ type: 'POST', url: (is_group_info ? 'https:\/\/www.fla-shop.com\/blog\/' + 'index.php' + '?map_id=8' + '&usahtml5map_get_group_info=' : 'https:\/\/www.fla-shop.com\/blog\/' + 'index.php' + '?map_id=8' + '&usahtml5map_get_state_info=') + id, success: function(data, textStatus, jqXHR){ jQuery('#usa-html5-map-state-info_0').html(data); }, dataType: 'text' }); return false; } if (ev===null && link!='') { if (!jQuery('.html5dummilink').length) { jQuery('body').append('<a href=\"#\" class=\"html5dummilink\" style=\"display:none\"><\/a>'); } jQuery('.html5dummilink').attr('href',link).attr('target',(map.fetchStateAttr(sid, 'isNewWindow') ? '_blank' : '_self'))[0].click(); } }; usahtml5map_map_0.on('click',html5map_onclick); }); <\/script><div id='usa-html5-map-state-info_0' class='usaHtml5MapStateInfo'>Try clicking on the state<\/div> <\/div> <div style='clear: both'><\/div> <!-- end HTML5 Map --> \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<p>By default, the plugin allows you to configure 2 colors for each state &#8211; <strong>default color<\/strong> and <strong>hover color<\/strong>. How about a third color &#8211; <strong>selected color<\/strong>? This can be easily added with some custom JS code.<\/p>\n\n\n\n<p>Let&#8217;s consider this short JS snippet<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nvar selected = null;\n \nmap.on('click', function(ev, sid, map) {\n    var was_selected = !!selected;\n    if (selected && selected != sid) {\n        map.stateHighlightOff(selected);\n        selected = null;\n    }\n    var link = map.fetchStateAttr(sid, 'link');\n    if (link === '#info') {\n        if (sid !== selected)\n            map.stateHighlightOn(sid, '#FF0000', '#FFFFFF');\n        selected = sid;\n    }\n    if (!selected && was_selected) {\n        jQuery('#'+containerId).parent().find('.usaHtml5MapStateInfo').html('');\n    }\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\">What Does This Code Do?<\/h2>\n\n\n\n<p>This code is programmed to highlight states in your map when a user clicks on it.<\/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 To Use The Code?<\/h2>\n\n\n\n<p>There is a dedicated option under the tools tab of your Fla-shop.com interactive map settings panel where you can insert custom JavaScript.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/01\/tools-tab-custom-js.png\" alt=\"Tools tab\"\/><\/figure>\n\n\n\n<p>Just enter your JS code and click save and it&#8217;s done. It is so easy that any novice can do it. Furthermore, you don&#8217;t necessarily have to know JS to use this functionality.<\/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 To Change The Color Of The Highlighted State?<\/h2>\n\n\n\n<p>Notice the red arrow in the image below. It points to the HEX code used to specify the colors of the selected state. You can change the HEX code of any color you want to use in your interactive map.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/01\/custom-js-01.png\" alt=\"Color for selected states\"\/><\/figure>\n\n\n\n<p>In case, you don&#8217;t know the HEX code of the color you are looking for, simply Google, &#8220;hex code of [color name]&#8221; and you will get it.&nbsp;<\/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 To Use This Code For Interactive Maps Of Other Countries?<\/h2>\n\n\n\n<p>The provided JS snippet is for the Fla-shop.com US Interactive Map. If you want to use it for an interactive Map of another country, say Canada, then you need to tweak the code.<\/p>\n\n\n\n<p>Search for the line<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\njQuery('#'+containerId).parent().find('.usaHtml5MapStateInfo').html('');\n<\/pre><\/div>\n\n\n<p>Locate the string: &#8216;<code>usaHtml5MapStateInfo<\/code>&#8216;<br>Change it to &#8211; &#8216;<code>canadaHtml5MapStateInfo<\/code>&#8216;<br>Similarly, if you want to use the code for the Map of India, use &#8216;<code>indiaHtml5MapStateInfo<\/code>&#8216;.<\/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\">Calling All Developers<\/h2>\n\n\n\n<p>As you can see, Fla-shop.com interactive maps promise a lot of potential. They can host an array of features and functionalities based on custom JS scripts. If you are a developer with a new idea\/functionality to add to the interactive maps, then we welcome your contribution. In return for your ingenuity, we promise to give you a free license to our premium plugin.&nbsp;<\/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\">In Conclusion<\/h2>\n\n\n\n<p>So this is how you can use custom JS codes to add extra features and functionalities to Fla-shop.com interactive maps. And even if you don&#8217;t have coding knowledge yourself, you can always use many of examples custom JS codes as shown in the article.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a class=\"greenbutton\" href=\"https:\/\/www.fla-shop.com\/products\/wp-plugins\/united-states\/us\/\">Get a try-for-free customizable US map for WordPress<\/a><\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Use some of these custom JS script examples to extend the functionality of Fla-shop.com interactive maps on your WordPress website.<\/p>\n","protected":false},"author":1,"featured_media":1351,"comment_status":"open","ping_status":"open","sticky":false,"template":"post1.php","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[40],"tags":[],"class_list":["post-879","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.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Real Examples Of Custom JS Scripts For WordPress Maps - Fla-Shop.com<\/title>\n<meta name=\"description\" content=\"Use some of these custom JS script examples to extend the functionality of Fla-shop.com interactive maps on your WordPress website.\" \/>\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\/examples-of-custom-js-scripts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Real Examples Of Custom JS Scripts For WordPress Maps - Fla-Shop.com\" \/>\n<meta property=\"og:description\" content=\"Use some of these custom JS script examples to extend the functionality of Fla-shop.com interactive maps on your WordPress website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fla-shop.com\/blog\/examples-of-custom-js-scripts\/\" \/>\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=\"2019-01-04T19:47:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-16T11:33:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/01\/custom-js.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"315\" \/>\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=\"3 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\\\/examples-of-custom-js-scripts\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/examples-of-custom-js-scripts\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#\\\/schema\\\/person\\\/16214725e757dd92d37dbfe3e2a5db1e\"},\"headline\":\"Real Examples Of Custom JS Scripts For WordPress Maps\",\"datePublished\":\"2019-01-04T19:47:36+00:00\",\"dateModified\":\"2022-11-16T11:33:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/examples-of-custom-js-scripts\\\/\"},\"wordCount\":522,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/examples-of-custom-js-scripts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/custom-js.png\",\"articleSection\":[\"Empowerment with Custom JS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/examples-of-custom-js-scripts\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/examples-of-custom-js-scripts\\\/\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/examples-of-custom-js-scripts\\\/\",\"name\":\"Real Examples Of Custom JS Scripts For WordPress Maps - Fla-Shop.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/examples-of-custom-js-scripts\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/examples-of-custom-js-scripts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/custom-js.png\",\"datePublished\":\"2019-01-04T19:47:36+00:00\",\"dateModified\":\"2022-11-16T11:33:12+00:00\",\"description\":\"Use some of these custom JS script examples to extend the functionality of Fla-shop.com interactive maps on your WordPress website.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/examples-of-custom-js-scripts\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/examples-of-custom-js-scripts\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/examples-of-custom-js-scripts\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/custom-js.png\",\"contentUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/custom-js.png\",\"width\":600,\"height\":315,\"caption\":\"Custom JS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/examples-of-custom-js-scripts\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Real Examples Of Custom JS Scripts For WordPress Maps\"}]},{\"@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":"Real Examples Of Custom JS Scripts For WordPress Maps - Fla-Shop.com","description":"Use some of these custom JS script examples to extend the functionality of Fla-shop.com interactive maps on your WordPress website.","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\/examples-of-custom-js-scripts\/","og_locale":"en_US","og_type":"article","og_title":"Real Examples Of Custom JS Scripts For WordPress Maps - Fla-Shop.com","og_description":"Use some of these custom JS script examples to extend the functionality of Fla-shop.com interactive maps on your WordPress website.","og_url":"https:\/\/www.fla-shop.com\/blog\/examples-of-custom-js-scripts\/","og_site_name":"Fla-Shop.com","article_publisher":"https:\/\/www.facebook.com\/flashopcom\/","article_published_time":"2019-01-04T19:47:36+00:00","article_modified_time":"2022-11-16T11:33:12+00:00","og_image":[{"width":600,"height":315,"url":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/01\/custom-js.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":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fla-shop.com\/blog\/examples-of-custom-js-scripts\/#article","isPartOf":{"@id":"https:\/\/www.fla-shop.com\/blog\/examples-of-custom-js-scripts\/"},"author":{"name":"admin","@id":"https:\/\/www.fla-shop.com\/blog\/#\/schema\/person\/16214725e757dd92d37dbfe3e2a5db1e"},"headline":"Real Examples Of Custom JS Scripts For WordPress Maps","datePublished":"2019-01-04T19:47:36+00:00","dateModified":"2022-11-16T11:33:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fla-shop.com\/blog\/examples-of-custom-js-scripts\/"},"wordCount":522,"commentCount":2,"publisher":{"@id":"https:\/\/www.fla-shop.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fla-shop.com\/blog\/examples-of-custom-js-scripts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/01\/custom-js.png","articleSection":["Empowerment with Custom JS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fla-shop.com\/blog\/examples-of-custom-js-scripts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fla-shop.com\/blog\/examples-of-custom-js-scripts\/","url":"https:\/\/www.fla-shop.com\/blog\/examples-of-custom-js-scripts\/","name":"Real Examples Of Custom JS Scripts For WordPress Maps - Fla-Shop.com","isPartOf":{"@id":"https:\/\/www.fla-shop.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fla-shop.com\/blog\/examples-of-custom-js-scripts\/#primaryimage"},"image":{"@id":"https:\/\/www.fla-shop.com\/blog\/examples-of-custom-js-scripts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/01\/custom-js.png","datePublished":"2019-01-04T19:47:36+00:00","dateModified":"2022-11-16T11:33:12+00:00","description":"Use some of these custom JS script examples to extend the functionality of Fla-shop.com interactive maps on your WordPress website.","breadcrumb":{"@id":"https:\/\/www.fla-shop.com\/blog\/examples-of-custom-js-scripts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fla-shop.com\/blog\/examples-of-custom-js-scripts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fla-shop.com\/blog\/examples-of-custom-js-scripts\/#primaryimage","url":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/01\/custom-js.png","contentUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/01\/custom-js.png","width":600,"height":315,"caption":"Custom JS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fla-shop.com\/blog\/examples-of-custom-js-scripts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.fla-shop.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Real Examples Of Custom JS Scripts For WordPress Maps"}]},{"@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\/879","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=879"}],"version-history":[{"count":20,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts\/879\/revisions"}],"predecessor-version":[{"id":1807,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts\/879\/revisions\/1807"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/media\/1351"}],"wp:attachment":[{"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/media?parent=879"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/categories?post=879"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/tags?post=879"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}