Is Embedded Maps Right for Your Website?

Embedded Maps is a good fit if your website or site builder supports an Embed or Custom HTML block. Because the service hosts the map for you, you do not need to upload or maintain JavaScript and CSS files yourself. You can manage the map through the visual editor and update it later without replacing the embed code on your website.

In some cases, another Fla-shop map product may be a better choice. If your site runs on WordPress and you prefer native plugin integration, consider a WordPress map plugin. If you want to host the map files yourself, a JS/CSS map may be more suitable.

Embedded Maps works through an iframe. If iframe-specific behavior is unsuitable for your project — for example, if links inside the map must open in the same browser tab — consider the WordPress or self-hosted JS/CSS alternatives instead.

In short, Embedded Maps works with websites and site builders that support HTML embed code.

How Embedded Maps Works

Create a map → customize it → publish → embed it on your website.

Step 1 — Choose and Create Your Map

Start in your Embedded Maps account and choose the map you want to create.

The map library includes the USA, the World, individual countries, U.S. states with counties, and other available regional maps. Select the map that fits your project and create it in your account.

Step 2 — Customize the Map

The visual editor contains the main tools you need to change the appearance of the map and add interactive content.

• Colors — Set Main and Hover colors, then click individual regions to apply your selected colors. Different regions can use different colors.
• Links & Tooltips — Select a region and add content, links, and other contextual information that visitors can access from the map.
• Markers — Add and position markers on the map. Markers can include labels, links, colors, icons, and tooltip content.
• Preview — Check how visitors will interact with your finished map before publishing it.

You can experiment with the USA map editor before creating an account.

Try the Map Editor — no sign-up required.

Step 3 — Choose How Map Content Appears

Embedded Maps provides two ways to display the information you add to regions and markers.

Tooltips work well for shorter information that visitors can view directly while interacting with the map.

Side Panel / Modal Box is better for longer or more structured content, such as contact details, office information, lists, or descriptions.

You can choose the Content Display Mode in the map’s Basic settings.

When Side Panel / Modal Box is selected, the display automatically adapts to the available width. If the map block is wider than 992 pixels, the content appears in a side panel next to the map. At narrower widths, the same content opens in a modal box over the map.

This makes it possible to use detailed content while keeping the map practical on smaller screens.

Example: Map with Modal Content

The example below demonstrates how the same type of map content can appear in a modal when a side-by-side layout is not appropriate.

Step 4 — Publish, Embed, and Test Your Map

When the map is ready, return to your account and publish it. Enable embedding for the map, then click Embed code to open the Installation code window.

The window contains the HTML code required to display your map on a website. Copy the code to the clipboard.

Next, open the page where you want the map to appear. Add an Embed, Custom HTML, or equivalent code block provided by your website builder and paste the installation code into it.

After embedding the map, preview the page on both desktop and mobile. Click several regions and markers to confirm that the correct content appears and that your links behave as expected.

If you later change colors, content, links, or markers, edit the map and republish it. Then check the website again to confirm that the embedded version has updated. You do not need to replace the embed code each time you update the map.

Common Ways to Use Embedded Maps

Sales Territories and Directories

Color regions by sales territory, service area, or responsibility and let visitors click a region to find the appropriate representative, distributor, office, or partner. Detailed contact information can be displayed in the side panel or modal box.

Locations, Events, and Travel

Use regions and markers to present locations, venues, destinations, routes, or other local information. Visitors can interact with the map to find additional details or follow links to relevant pages.

Data, Education, and Storytelling

Interactive maps can help present regional statistics, programs, research, educational information, and editorial content. Tooltips can provide quick context, while the side panel or modal mode can hold more detailed information.

Plans and Trial

You can create a free Embedded Maps account and use it to create and edit maps. The Free plan also includes trial embedding so you can test a map on your own website.

Paid plans provide ongoing website embedding. Plan limits depend primarily on the number of maps you need to embed, so you can choose the level that matches your project and upgrade if your requirements grow.

For current prices and map quotas, see the Embedded Maps pricing page.

View Embedded Maps Pricing

Platform-Specific Embedding Guides

Once your map is ready, use the guide for your website builder to see exactly where to paste the embed code.

• How to Embed Interactive Maps in WIX
• How to Add an Interactive Map to Webflow
• How to Add an Interactive Map to Squarespace
• How to Embed a Map Widget in GoDaddy Website Builder
• How to Embed Interactive Maps in Weebly and Square Online

These guides focus on the website-builder side of the process, while this overview covers creating, configuring, and publishing the map itself.

FAQ

Can I embed the same map on multiple websites?
Yes. Embedded Maps plans are based on the number of maps you embed rather than the number of pages or domains where the same map appears. This means the same published map can be used in more than one location without creating a separate copy for every website or page.

Can links inside the map open in the same tab?
Embedded Maps are displayed through an iframe. In many website builders, links from embedded iframe content open in a new browser tab or window because of the way embedded content is isolated.

If opening map links in the same tab is important for your project, consider a Fla-shop WordPress plugin or a self-hosted JS/CSS map instead. These alternatives do not rely on the same iframe-based embedding approach and provide more control over link behavior.

Ready to Create Your Interactive Map?

Want to experiment before registering? Try the Map Editor and customize a USA map directly in your browser.

Ready to save your map and test it on your website? Create a Free Account.

You can also View Pricing Plans when you are ready to choose a plan for ongoing embedding.

Solution for Elementor Pro

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:

setTimeout (function () { map.reloadMap(); }, 100);
 
/*var parents = jQuery('#'+containerId).parentsUntil('.elementor-tab-content');*/
var parents = jQuery('#'+containerId).parentsUntil('.elementor-element.e-con[data-tab-index]');
var tabContainer = null;
if (parents.length) {
    var last = parents[parents.length - 1];
    if (jQuery(last).parent() && last != document.firstElementChild) {
        tabContainer = jQuery(last).parent()[0];
    }
}
 
var reloadDone = false;
 
if (! tabContainer)
    return;
tabContainer = jQuery(tabContainer);
var tabId = tabContainer.data('tab-index');
 
var clickCallback = function () {
    if (reloadDone) return;
    setTimeout(function () {
        map.reloadMap();
        reloadDone = true;
    }, 10);
};
 
var  tab = tabContainer.parentsUntil('.elementor-widget-container').find('[role=tab][data-tab-index='+tabId+']');
tab.on('click', clickCallback);
jQuery(window).resize(function () { reloadDone = false; });

It’s all! The code is universal and suitable for any locator map by Fla-shop.com – World map for WordPress, U.S. map, maps of other countries.

Conclusion

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.

For Elementor Free, use the first code snippet provided in this article. For Elementor Pro, use the second updated code snippet.

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.

Are the HTML5 Maps Compatible With Gutenberg?

The new editor has created a sort of division in the WordPress community. A section of the community is praising the innovative direction. Gutenberg is more true to a WYSIWYG experience and makes content creation far simpler for non-coders.

However, on the flip side, many are citing that the editor now functions as a page builder, which is not good for many use cases. Although it will benefit media-heavy websites, blogs and similar sites will not find it suitable. But by far, the most amount of noise is created in the argument for backward compatibility.

Developers are arguing that it will affect client websites that are made using custom fields and meta boxes.

Taking this into context, we would like to point out that the users will face no compatibility issues while using these HTML5 maps plugins from Fla-shop.com. It is also super easy to configure, helping you get a functional interactive map up and running in minutes.

How to Insert Interactive Maps in Gutenberg?

After activating the plugin, you will notice an HTML5 Map Settings in your WordPress dashboard. Hover over it and you will notice a Maps option. This will take you to a new page where you can create new interactive maps to add to your website.

Simply create a new name for the map. There is also a drop-down button that contains a list of all the map options. Select the one which you intend to use and press “Add new map.” This will create the new map and specify a shortcode that you need to use while integrating the map into your WordPress website.

Once you have the shortcode, the plugin provides a handful of ways to help you insert the interactive maps in the Gutenberg editor.

1. You can insert the shortcode directly into the Gutenberg editor.

2. You can insert the shortcode inside a paragraph block.

3. There is also an option that allows you to insert the shortcode in the classic editor block.

4. And, finally, you have the option to use basic HTML code to implement the maps into your page or post.

So, How Can You Benefit From Having Interactive Maps?

Now, you might be thinking about why you need to use an interactive map on your website when there is Google Maps. Well, the reason basically boils down to this – G-maps contain loads of unnecessary details that can even hurt your conversion rates and showcase your nearby competitors. Furthermore, it is not very easy to customize G-maps to fit your personal needs.

However, both these requirements are easily met by the interactive map plugin from Fla-shop.com. You will be able to provide a visually immersive and engaging medium to guide your visitors to local, relevant content on your website.

Furthermore, interactive maps are a godsend to businesses that have a wide branch network. Using interactive maps, you can display your branch locations in a colorful JavaScript map, highlighting all your locations across a country, or in a Worldview.

The Benefits of Using HTML5 Maps

Fla-shop.com offers 4 different categories of products. Two of them are for showcasing Locator Maps for WordPress as well as JS maps non-WordPress websites. And the remaining two are for Drill-down maps for WordPress and non-WordPress websites.

As you can guess, the locator maps will showcase a region – a country in particular. You will be able to highlight different states on the map with color customization options. This is useful for businesses that have a national foothold.

The drill-down maps are essentially multi-level maps. You will get a global view from which you can “drill down” to a local map or a specific region following a couple of clicks. As you can imagine, this is perfect if your business is spread across the world in different countries.

In Conclusion

So as you can see, the map plugins from Fla-shop.com allows you to easily integrate maps into your WordPress website. No matter if you are on the old classic WordPress editor or the new Gutenberg editor, you will face no compatibility issues or anything similar.

If you think you will benefit from having an interactive map integrated into your website, then we highly recommend that you give this plugin a try.

Also, if you want to get an idea about the different types of interactive maps that can be created using the plugin, then we highly encourage you to the Showcase page as well.

Get a try-for-free customizable US map for WordPress