Map Widget: How to Add an Interactive Map to Your Website

A map widget is an embeddable map you add to a website so visitors can see locations, get directions and interact with them. See also our guide to interactive maps. For one location, the free Google Maps iframe is enough. For several locations that visitors need to search and filter, a store locator widget does the job without custom development.

This guide covers the types available, how to embed the free one, what each option costs to run and how to pick. We make StoreRocket, so weigh our view with that in mind.

Related: Google Maps vs Mapbox | What is a store locator? | Retail map guide | Locator map guide

The short answer

• One location: use the free Google Maps iframe (steps below).
• A short list that rarely changes: one map with a pin for each location can be enough.
• Many locations, or visitors who need to search: use a store locator widget, or build one with developers.
• Building it yourself: the map is the small part. Search, filters, a phone layout and a way to update locations come on top. Our guide to building a store locator with AI lists what a build needs.

Only a few locations and no budget? You may not need a store locator at all. A free embedded map with a pin for each location is fine when the list is short, rarely changes and visitors only need to see where you are. Our guide to free store locator options compares them.

What is a Map Widget?

A map widget is any self-contained map component designed to be embedded on a web page. At its simplest, it's a Google Maps iframe showing a single pin. At its most advanced, it's a fully interactive experience with search, filtering, custom markers, clustering, directions, and real-time data.

The term covers a wide range of implementations:

• Static map embeds that show a fixed location
• Interactive map widgets that let users pan, zoom, search, and click
• Store locator widgets that combine maps with business data, search, and filtering
• Custom-built map applications using mapping APIs like Google Maps or Mapbox

What separates a basic embed from a real interactive solution is user interaction. Can visitors search for locations? Filter results? Get directions? View business hours? The more interactive the experience, the more useful it becomes.

Why Businesses Need a Map Widget

Visitors who land on your site looking for a nearby location expect to see a map they can use, not a list of addresses or a PDF. A map answers "where is your nearest location?" at any hour, which cuts the emails and enquiries that ask it.

A map with clear addresses also supports your local search presence, but a JavaScript widget does not replace a page per location. For the honest picture, read our guide to store locator SEO.

Types of Map Widgets

Not all options are created equal. Here's what's available, from simplest to most powerful.

1. Simple Google Maps Embed (iframe)

The most basic option. You grab an embed code from Google Maps, paste it into your site, and get a map showing a single location with a pin.

Best for: Single-location businesses that just need a "find us" map on their contact page.

2. API-Based Custom Maps

Using the Google Maps JavaScript API, Mapbox GL JS, or MapLibre, developers can build custom interactive maps from scratch. This gives full control over styling, markers, popups, data layers, and behavior.

Best for: Companies with developer resources that need highly custom map experiences.

3. Store Locator Widgets

Purpose-built solutions designed specifically for businesses with multiple locations. These are turnkey solutions that combine interactive maps with location search, filtering, custom branding, analytics, and management tools.

Best for: Businesses with multiple locations that need a professional locator without custom development.

Advantages:

• Built-in search, filtering, and directions
• A phone layout that works out of the box
• A dashboard for managing locations
• Analytics on searches and clicks, depending on the plan

Map costs: a store locator widget still runs on a map provider. With StoreRocket, the map is supplied during the free trial; after you subscribe you connect your own Google Maps or Mapbox key and pay that provider directly, as you would with a custom build.

Related: How to add a store locator to your website

How to Embed a Basic Google Maps Widget

If you just need a simple map showing one location, the Google Maps iframe embed is free.

Step 1: Find Your Location on Google Maps

Go to Google Maps and search for your business or address. Make sure the pin is in the right spot.

Step 2: Get the Embed Code

1. Click the Share button (or the hamburger menu)
2. Select the Embed a map tab
3. Choose your preferred size (small, medium, large, or custom)
4. Copy the iframe code

The code looks like this:

 1<iframe
 2  src="https://www.google.com/maps/embed?pb=!1m18!..."
 3  width="600"
 4  height="450"
 5  style="border:0;"
 6  allowfullscreen=""
 7  loading="lazy"
 8  referrerpolicy="no-referrer-when-downgrade">
 9</iframe>

Step 3: Paste Into Your Website

Add the iframe code to your page's HTML wherever you want the map to appear. Most website builders (WordPress, Squarespace, Wix, Webflow) have an "Embed" or "Custom HTML" block for this.

Building a Map with Mapbox or the Google Maps API

Mapbox and the Google Maps JavaScript API let a developer build a fully custom map. Mapbox lists a free tier of 50,000 map loads a month. A basic map with pins is the easy part. A store locator also needs:

• Address search with suggestions, and results sorted by distance
• Filters, a details panel and a phone layout
• A way to import and update locations without editing code
• Opening hours that respect each location's time zone
• Map keys restricted to your domains, and upkeep when libraries or browsers change

Our guide to building a store locator with AI covers that list and the checks to run before launch. For what each map provider offers and costs, see our Google Maps API alternatives guide.

Why a Store Locator Widget Beats DIY Map Embeds

Building an interactive map from scratch with a map API is possible. A store locator widget packages the surrounding search and location-management features.

Features You'll Eventually Need

Businesses with multiple locations may need:

• Search: "Find stores near me" or "stores in Chicago"
• Filtering: "Show only locations with wheelchair access"
• Directions: One-click navigation to the chosen store
• Hours and details: Business hours, phone numbers, photos
• Analytics: What do visitors search for, and which locations do they open?
• Bulk management: Update 500 locations without editing code

Building each of these on top of a raw map API is a project in itself. A store locator widget includes them, though which ones depend on the product and plan.

Mobile Experience

Many visitors will use the map on a phone, so it needs attention to touch interactions, responsive sizing, popup behavior and performance.

Related: Store locator examples

Map Widget Best Practices

Whether you choose a basic embed or a full store locator widget, follow these principles to get the best results.

Optimize for Mobile First

Your embedded map will be used on phones more than desktops. Make sure:

• The map is responsive and fills the available width
• Touch interactions (pinch to zoom, tap to select) work smoothly
• Popups and info panels don't overflow the screen
• The search input is easily accessible with one thumb
• Load times stay low on mobile connections

Keep Initial Load Fast

Maps add JavaScript and tile data. To minimize impact:

• Use loading="lazy" on iframes so the map loads only when scrolled into view
• If using an API, defer map initialization until the user interacts with the page
• Compress and optimize any custom marker images
• Avoid loading the map on pages where it isn't visible above the fold

Use Meaningful Markers

Default red pins are fine for one location. For multiple locations, consider:

• Custom markers that match your brand colors
• Different marker styles for different location types (stores vs warehouses vs partners)
• Marker clustering when you have many locations in close proximity
• Clear visual hierarchy so users can quickly scan the map

Include Essential Information

Every location on your map should display:

• Business name
• Full address
• Phone number
• Business hours (with an "Open now" or "Closed" status)
• A "Get directions" link (StoreRocket's opens Google Maps)

Optional but valuable: photos, available services and special instructions.

Make Search Intuitive

If your locator supports search, make it obvious and easy:

• Place the search input above or beside the map, never hidden behind a button
• Support zip codes, city names, and full addresses
• Add geolocation ("Use my location") for one-tap searching
• Show a clear "No results found" message with helpful suggestions when search returns empty

Track Performance

You can't improve what you don't measure. Monitor:

• How many visitors interact with the map
• Most searched locations and zip codes
• Which locations visitors open
• Searches that found nothing nearby

Direction requests and calls are Google Business Profile metrics, so look for them there. With StoreRocket, analytics depend on the plan (see pricing).

Choosing the Right Solution

The right choice depends on three factors:

1. How many locations do you have? One location: use a Google Maps iframe. Multiple locations: use a store locator widget or build a custom solution.

2. Do you have developer resources? If yes, building with Mapbox or Google Maps API gives maximum flexibility. If no, a store locator widget gets you live faster with less ongoing effort.

3. What features do you actually need? Be honest about this. Many multi-location businesses need search, filtering, a phone layout and basic analytics. A developer can build all of that, but it becomes yours to maintain.

For a multi-location business without developers, a purpose-built store locator widget is usually the practical choice. StoreRocket maintains the hosted locator and delivers updates through the embed already on your site, so you update locations in the dashboard instead of maintaining map code.

StoreRocket gives multi-location businesses a store locator for their own website: import your locations from a spreadsheet, match it to your brand and paste one embed code. Create your locator with a free trial, no credit card needed.

Frequently Asked Questions

Is there a free map widget for websites?

Yes. The simplest free option is a Google Maps iframe embed, which works for showing a single location. Google Maps and Mapbox also offer free API usage: see Google's pricing and Mapbox's pricing for the current allowances. For businesses with multiple locations, compare the interaction and management features included with each approach.

What is the best interactive map widget for business websites?

It depends on your needs. For single-location businesses, a Google Maps embed is sufficient. For businesses with multiple locations that need search, filtering, and location management, a store locator widget is the better choice. StoreRocket is one such store locator: you import your locations, match it to your brand and paste one embed code, with no development work.

Can I add an interactive map to WordPress, Shopify, or Squarespace?

Yes. Google Maps iframes can be pasted into most platforms' HTML editors. Store locator widgets typically provide a simple embed code that works on any website that accepts an HTML or embed block. StoreRocket also has a free WordPress plugin and a Shopify app. See our platform-specific guides: Shopify, WordPress, Squarespace.

How much does an embeddable map cost?

A basic Google Maps iframe is free. Mapping API costs depend on the products and usage, while store locator widget pricing varies by provider, location allowance, and feature set. The total investment can also include setup, maintenance, and ongoing management.

Does an embedded map slow down my website?

It can. Maps load JavaScript and tile data. To limit the impact, lazy-load the map so it loads when scrolled into view, place it lower on the page and measure performance on the published page.

Related

• Google Maps vs Mapbox: Which is Better for Store Locators?
• Google Maps API Alternatives
• How to Add a Store Locator to Your Website
• Store Locator Examples