Key Benefits

1. Easy, visual customization
   From regional colors to hover effects, markers, and tooltips—everything happens in a clean, visual editor. You don’t have to edit SVGs or write JavaScript. Pick colors, type your text, drag a marker, and hit Save.
2. Works with any website builder
   The output is a short installation snippet you paste into your builder’s “Embed” or “Custom HTML” block. Because it’s hosted, you don’t manage files or libraries, and compatibility remains simple across Wix, Squarespace, GoDaddy, Weebly, and more.
3. Mobile-friendly and responsive
   Maps scale fluidly across devices. On larger screens, you may show details in a side panel; on narrow screens, the same content appears in a lightweight modal. This ensures a consistent UX whether your visitors are on desktop or mobile.
4. Built for speed and clarity
   The editor focuses on the essentials: colors, labels, tooltips, links, markers, and preview. That keeps your workflow fast and your map clean—no hidden complexity, no bloated options. You can even download a static PNG for presentations or quick mockups when needed.
5. Free trial, then flexible plans
   Start free and test embedding on your live site. After the trial, pick a plan that matches how many maps you need to publish (great for teams and agencies managing multiple sites). Upgrading removes the trial banner and unlocks higher map counts.

How It Works (Step-by-Step Overview)

In short: create a map → customize it → publish → paste the embed code into your website.

Step 1 — Create a map in your account

Sign in and choose the map you need (e.g., USA, World, European countries, individual U.S. states with counties, and more). Your account dashboard keeps all maps in one place and shows draft vs. published status at a glance.

Step 2 — Customize in the editor

After creating a new map, the visual editor opens automatically. Use the tabs to customize colors, tooltips, and markers.

• Colors: choose a Main color and a Hover color as your fill tool, then click on regions to apply them. You can pick any colors you like and adjust regions individually or apply them to all at once via the Gear menu.
• Links & Tooltips: choose a region, then add text, bullet points, links, and other content. This is where you turn a plain map into a helpful, contextual guide.
• Markers: double-click to drop a marker, edit its label, color, icon type, size, link, and tooltip. Drag it to reposition.
• Preview: test your map in both Tooltip and Side Panel modes to see exactly how visitors will interact.

Try it first—no sign-up required: Try the editor online

Step 3 — Choose how details appear

In Basic Map Settings, pick your Content Display Mode:

• Tooltips for lightweight hover/click info, or
• Side Panel / Modal Box for longer descriptions and structured content (e.g., office lists or event details). On wider layouts (over ~992px), the side panel appears; on narrower ones, the content opens in a modal—so your map stays readable on phones.

Example of a map with modal pop-ups

Step 4 — Publish and embed

When your map is ready, publish it in your account and enable embedding. Then click the Embed Code button to open the Installation code window, where you can copy the snippet.

In your website builder, add an Embed or Custom HTML block and paste the code—done. You can always return to the editor, make changes, and republish; your embedded map will update accordingly.

Use Cases & Examples

Interactive maps aren’t just “nice to have.” They help people understand context instantly. Here are practical ways organizations use Embedded Maps:

• Sales territories & partner directories
  Color regions by territory, add links to local reps, and list partners. A side panel can show contacts, phone numbers, and emails when a region is selected—perfect for B2B sites and channel programs.
• Events & venues
  Present venues, zones, or routes for conferences, festivals, or city tours. Visitors can tap a region to view schedules, speaker lists, or venue access instructions.
• Tourism & travel blogs
  Highlight destinations, trips, and itineraries. Bloggers can use markers to add quick facts or link out to detailed posts, galleries, or booking pages.
• Research, NGOs & education
  Show regional statistics, program footprints, or resource maps. Tooltips can summarize key metrics, while side panel mode holds richer narratives and calls to action.
• Media & editorial storytelling
  Enrich articles with a map that readers can explore, from election coverage to regional profiles or historical timelines.

Plans & Pricing

Embedded Maps is intentionally simple: all paid plans include the same editing and embedding features. The only difference is how many maps you can create and publish under your subscription. This makes it easy to start small and scale as your portfolio grows.

• Free
  Ideal for evaluation and quick demos. You can embed a map with a 7-day trial. After that, a small banner appears on embedded maps as a reminder to upgrade. The editor still works, so you can continue experimenting or switch to a paid plan at any time.
• Lite
  Best for solo site owners who need to publish a small number of maps—think a company site with a branch locator and one or two campaign pages. Same capabilities as higher plans, just a smaller map allowance.
• Pro
  Designed for growing teams, marketing departments, or multi-site businesses that need more published maps simultaneously. Great if you run seasonal campaigns, maintain several landing pages, or manage multiple properties.
• Pro+
  Tailored for agencies and large teams. Use it when you manage a broader portfolio—client sites, microsites, or multiple languages—and need a higher number of active maps without juggling accounts. All features are included; pricing reflects the larger map quota.

Important: Feature-wise, all paid tiers are the same. You’re choosing the map count that matches your workload. If your needs grow, upgrade at any time to increase your allowance.

View pricing plans

Related How-to Guides

If you already use a site builder, these step-by-step tutorials show where to paste the code:

• How to Embed Interactive Maps in WIX
• How to Embed Map Widget in GoDaddy Website Builder
• How to Embed Interactive Maps in Weebly

We’ll keep adding more guides for other builders and CMSs.

FAQ

Do I need coding skills?
No. You’ll copy a short snippet and paste it into your site builder’s “Embed” or “Custom HTML” block. All hosting and updates are handled for you.

How long is the free trial?
The embedding trial lasts 7 days. After that, a small banner appears on embedded maps until you upgrade. Your editor access remains available, so you can continue refining your map.

Can I change colors, tooltips, and markers later?
Yes. Open the editor, make changes, and republish. The embedded map updates automatically—no need to replace the snippet.

Does it work on mobile?
Yes. The widget is responsive. On smaller screens, long content switches to a modal for better readability, while desktop users can view the same content in a side panel.

Is there a limit on the number of sites I can embed on?
You choose a plan based on how many maps you publish simultaneously, not on how many pages or domains display each map. If your map quota needs grow, simply upgrade.

Can I download a static image?
Yes. For quick mockups or documentation you can export a PNG from the editor, though the interactive version delivers the best user experience.

Can links inside the map open in the same tab?
In many website builders (e.g., Wix, GoDaddy, Weebly), all embedded widgets run inside an iframe for security isolation. This setup means any link inside the map will always open in a new browser tab or window—a behavior enforced at the platform level.
If you want links to open in the same tab, consider using our WordPress plugins or self-hosted JS/CSS/HTML5 maps, which don’t rely on iframes and offer full control over link behavior.

Conclusion

With Embedded Maps, you can turn plain maps into interactive visualizations that tell a story—highlight territories, show locations, or present data clearly. The hosted approach removes technical friction, and the editor keeps your workflow focused on what matters: content and design. Whether you manage one site or dozens, you’ll launch faster and keep everything easy to update.

Create a free account

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