{"id":921,"date":"2019-02-15T08:22:41","date_gmt":"2019-02-15T08:22:41","guid":{"rendered":"https:\/\/www.fla-shop.com\/blog\/?p=921"},"modified":"2024-03-27T07:24:55","modified_gmt":"2024-03-27T07:24:55","slug":"how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder","status":"publish","type":"post","link":"https:\/\/www.fla-shop.com\/blog\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\/","title":{"rendered":"How to Integrate Interactive Maps into Elementor Tabs"},"content":{"rendered":"\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Difficulties with integrating maps into tabs<\/h2>\n\n\n\n<p class=\"article_sm_block\">Our interactive maps are very simple and functional plugins for publishing maps on WordPress sites. Inserting maps into a post, page, or widget is very simple and is done via a shortcode. However, sometimes there are more complex integrations required when the map needs to be inserted inside tabs or a drop-down menu.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/02\/united-states-in-tabs.jpg\" alt=\"United States Map on Elementor tabs\"\/><\/figure>\n\n\n\n<p>Elementor, a popular page builder for WordPress, is also compatible with our maps. You can simply insert a shortcode into a typical section or page in Elementor for it to appear. However, if you insert one inside the tabs, it will not be displayed properly because it does not automatically resize in the tab section.<\/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-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Solution for Elementor Free<\/h2>\n\n\n\n<p>Map plugins by Fla-shop.com have an API, and the plugin interface has a field for inserting custom JS code.<br>Copy the following code, and paste it into the Tools tab in the map settings.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nsetTimeout (function () { map.reloadMap(); }, 100);\n\nvar parents = jQuery('#'+containerId).parentsUntil('.elementor-tab-content');\nvar tabContainer = null;\nif (parents.length) {\n    var last = parents&#x5B;parents.length - 1];\n    if (jQuery(last).parent() &amp;&amp; last != document.firstElementChild) {\n        tabContainer = jQuery(last).parent()&#x5B;0];\n    }\n}\n\nvar reloadDone = false;\n\nif (! tabContainer)\n    return;\ntabContainer = jQuery(tabContainer);\nvar tabId = tabContainer.data('tab');\n\nvar clickCallback = function () {\n    if (reloadDone) return;\n    setTimeout(function () {\n        map.reloadMap();\n        reloadDone = true;\n    }, 10);\n};\n\nvar  tab = tabContainer.parentsUntil('.elementor-widget-container').find('&#x5B;role=tab]&#x5B;data-tab='+tabId+']');\ntab.on('click', clickCallback);\njQuery(window).resize(function () { reloadDone = false; });\n<\/pre><\/div>\n\n\n<p>You can also find this code on <a href=\"https:\/\/pastebin.com\/0vpmGdty\" target=\"_blank\" rel=\"noreferrer noopener\">pastebin.com<\/a><br>The following screenshot shows exactly where to insert the custom JS code:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/02\/custom-js-for-elementor-tabs.png\" alt=\"Custom JS for Elementor tabs\"\/><\/figure>\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\">Solution for Elementor Pro<\/h2>\n\n\n\n<p>Elementor Pro has a different tab structure, so a separate code snippet is required. Use this updated code for integrating maps inside Elementor Pro tabs:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nsetTimeout (function () { map.reloadMap(); }, 100);\n \n\/*var parents = jQuery('#'+containerId).parentsUntil('.elementor-tab-content');*\/\nvar parents = jQuery('#'+containerId).parentsUntil('.elementor-element.e-con&#x5B;data-tab-index]');\nvar tabContainer = null;\nif (parents.length) {\n    var last = parents&#x5B;parents.length - 1];\n    if (jQuery(last).parent() && last != document.firstElementChild) {\n        tabContainer = jQuery(last).parent()&#x5B;0];\n    }\n}\n \nvar reloadDone = false;\n \nif (! tabContainer)\n    return;\ntabContainer = jQuery(tabContainer);\nvar tabId = tabContainer.data('tab-index');\n \nvar clickCallback = function () {\n    if (reloadDone) return;\n    setTimeout(function () {\n        map.reloadMap();\n        reloadDone = true;\n    }, 10);\n};\n \nvar  tab = tabContainer.parentsUntil('.elementor-widget-container').find('&#x5B;role=tab]&#x5B;data-tab-index='+tabId+']');\ntab.on('click', clickCallback);\njQuery(window).resize(function () { reloadDone = false; });\n<\/pre><\/div>\n\n\n<p>It&#8217;s all! The code is universal and suitable for any locator map by Fla-shop.com &#8211; <a href=\"https:\/\/www.fla-shop.com\/products\/wp-plugins\/world\/countries\/\">World map for WordPress<\/a>, <a href=\"https:\/\/www.fla-shop.com\/products\/wp-plugins\/united-states\/us\/\">U.S. map<\/a>, maps of other countries.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_md_block\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"633\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2023\/10\/elementor-tabs-1024x633.png\" alt=\"Inserting a map in tabs for Elementor Pro\" class=\"wp-image-2052\" srcset=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2023\/10\/elementor-tabs-1024x633.png 1024w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2023\/10\/elementor-tabs-300x185.png 300w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2023\/10\/elementor-tabs-768x475.png 768w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2023\/10\/elementor-tabs-524x324.png 524w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2023\/10\/elementor-tabs-647x400.png 647w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2023\/10\/elementor-tabs.png 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\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>The process of integrating interactive maps into Elementor tabs requires some custom JavaScript code. The specific code depends on whether you are using the free version of Elementor or the Elementor Pro version.<\/p>\n\n\n\n<p>For Elementor Free, use the first code snippet provided in this article. For Elementor Pro, use the second updated code snippet.<\/p>\n\n\n\n<p>The key is to identify which version of Elementor your site is using, and insert the corresponding code block into the Custom JS section as shown. This will enable the map to properly resize and function within the tab on page load and tab click.<\/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-flow wp-block-group-is-layout-flow\">\n<p class=\"has-text-align-center\"><a class=\"greenbutton\" href=\"https:\/\/www.fla-shop.com\/products\/wp-plugins\/united-states\/us\/\">Try a fully functional map of the U.S. for WP<\/a><\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Integrating responsive maps into Elementor tabs requires custom JavaScript code. Get the code snippets for Elementor Free and Elementor Pro to display the maps properly.<\/p>\n","protected":false},"author":1,"featured_media":1350,"comment_status":"open","ping_status":"open","sticky":false,"template":"post1.php","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[41],"tags":[],"class_list":["post-921","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-maps-for-visual-editors"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Insert Interactive Maps in Elementor Tabs<\/title>\n<meta name=\"description\" content=\"Learn how to integrate interactive maps into tabs created with Elementor page builder. Get the custom JS code snippets for Elementor and Elementor Pro.\" \/>\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\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Insert Interactive Maps in Elementor Tabs\" \/>\n<meta property=\"og:description\" content=\"Learn how to integrate interactive maps into tabs created with Elementor page builder. Get the custom JS code snippets for Elementor and Elementor Pro.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fla-shop.com\/blog\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\/\" \/>\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-02-15T08:22:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-27T07:24:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/02\/elementor.jpg\" \/>\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\/jpeg\" \/>\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\\\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#\\\/schema\\\/person\\\/16214725e757dd92d37dbfe3e2a5db1e\"},\"headline\":\"How to Integrate Interactive Maps into Elementor Tabs\",\"datePublished\":\"2019-02-15T08:22:41+00:00\",\"dateModified\":\"2024-03-27T07:24:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\\\/\"},\"wordCount\":350,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/elementor.jpg\",\"articleSection\":[\"Maps for visual editors\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\\\/\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\\\/\",\"name\":\"How to Insert Interactive Maps in Elementor Tabs\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/elementor.jpg\",\"datePublished\":\"2019-02-15T08:22:41+00:00\",\"dateModified\":\"2024-03-27T07:24:55+00:00\",\"description\":\"Learn how to integrate interactive maps into tabs created with Elementor page builder. Get the custom JS code snippets for Elementor and Elementor Pro.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/elementor.jpg\",\"contentUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/elementor.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Maps for Elementor\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Integrate Interactive Maps into Elementor Tabs\"}]},{\"@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":"How to Insert Interactive Maps in Elementor Tabs","description":"Learn how to integrate interactive maps into tabs created with Elementor page builder. Get the custom JS code snippets for Elementor and Elementor Pro.","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\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\/","og_locale":"en_US","og_type":"article","og_title":"How to Insert Interactive Maps in Elementor Tabs","og_description":"Learn how to integrate interactive maps into tabs created with Elementor page builder. Get the custom JS code snippets for Elementor and Elementor Pro.","og_url":"https:\/\/www.fla-shop.com\/blog\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\/","og_site_name":"Fla-Shop.com","article_publisher":"https:\/\/www.facebook.com\/flashopcom\/","article_published_time":"2019-02-15T08:22:41+00:00","article_modified_time":"2024-03-27T07:24:55+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/02\/elementor.jpg","type":"image\/jpeg"}],"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\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\/#article","isPartOf":{"@id":"https:\/\/www.fla-shop.com\/blog\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\/"},"author":{"name":"admin","@id":"https:\/\/www.fla-shop.com\/blog\/#\/schema\/person\/16214725e757dd92d37dbfe3e2a5db1e"},"headline":"How to Integrate Interactive Maps into Elementor Tabs","datePublished":"2019-02-15T08:22:41+00:00","dateModified":"2024-03-27T07:24:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fla-shop.com\/blog\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\/"},"wordCount":350,"commentCount":0,"publisher":{"@id":"https:\/\/www.fla-shop.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fla-shop.com\/blog\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/02\/elementor.jpg","articleSection":["Maps for visual editors"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fla-shop.com\/blog\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fla-shop.com\/blog\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\/","url":"https:\/\/www.fla-shop.com\/blog\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\/","name":"How to Insert Interactive Maps in Elementor Tabs","isPartOf":{"@id":"https:\/\/www.fla-shop.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fla-shop.com\/blog\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\/#primaryimage"},"image":{"@id":"https:\/\/www.fla-shop.com\/blog\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/02\/elementor.jpg","datePublished":"2019-02-15T08:22:41+00:00","dateModified":"2024-03-27T07:24:55+00:00","description":"Learn how to integrate interactive maps into tabs created with Elementor page builder. Get the custom JS code snippets for Elementor and Elementor Pro.","breadcrumb":{"@id":"https:\/\/www.fla-shop.com\/blog\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fla-shop.com\/blog\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fla-shop.com\/blog\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\/#primaryimage","url":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/02\/elementor.jpg","contentUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/02\/elementor.jpg","width":1200,"height":630,"caption":"Maps for Elementor"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fla-shop.com\/blog\/how-to-insert-a-responsive-map-in-tabs-by-elementor-page-builder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.fla-shop.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Integrate Interactive Maps into Elementor Tabs"}]},{"@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\/921","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=921"}],"version-history":[{"count":16,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts\/921\/revisions"}],"predecessor-version":[{"id":2083,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts\/921\/revisions\/2083"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/media\/1350"}],"wp:attachment":[{"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/media?parent=921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/categories?post=921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/tags?post=921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}