For one location, the free Google Maps iframe embed is the quickest "Google Maps widget": copy the code from Google Maps and paste it into your page. For several locations that visitors need to search, you need a store locator, either one you build with the Google Maps JavaScript API or one you embed.
This guide covers every way to add a Google Maps widget to your website in 2026, with honest pros and cons for each, so you can pick the one that fits. We make StoreRocket, so weigh our view with that in mind.
Related: Google Maps API pricing breakdown | Google Maps vs Mapbox | Google Maps embed generator | How to create a map with multiple locations
The short answer
- One pin on a contact page: use the free iframe embed (Option 1). No API key and no billing account.
- A route, a search or a place view: the Maps Embed API (Option 3) adds those modes with a key and no JavaScript.
- A fully custom map your developers will own: the Maps JavaScript API (Option 2).
- Many locations with search, filters and a dashboard: a no-code store locator (Option 4).
A free Google Maps embed is enough when
- You have one location, or a few that rarely change.
- Visitors only need to see where you are and tap for directions.
- You are comfortable pasting an iframe into a page.
Use StoreRocket when
- Visitors need to search by address or postcode and see the nearest location.
- The people who update locations are not developers.
- You want filters, opening hours and a phone layout that already work.
- You want to see what visitors search for.
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, and the free Google Maps embed generator makes the code for a map with several pins.
Option 1: Free Google Maps Embed (iframe)
The simplest way to put a Google map on your website. No API key, no billing account, no code beyond copy-paste.
How It Works
Go to Google Maps, find your location, click Share, select "Embed a map," and paste the generated HTML into your site.
Step-by-Step
1. Search for your location on Google Maps. Make sure the pin is positioned correctly on your business.
2. Click the Share button (the arrow icon near the top left) and switch to the "Embed a map" tab.
3. Choose a size. Google offers Small (400x300), Medium (600x450), Large (800x600), and Custom. For most websites, Medium or Large works best.
4. Copy the HTML code. It generates an iframe that looks like this:
1<iframe
2 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.019394!2d-122.419416!3d37.774929!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80858064e1280!2sSan+Francisco!5e0!3m2!1sen!2sus!4v1234567890"
3 width="600"
4 height="450"
5 style="border:0;"
6 allowfullscreen=""
7 loading="lazy"
8 referrerpolicy="no-referrer-when-downgrade">
9</iframe>
5. Paste into your website. In WordPress, use a Custom HTML block. In Squarespace, use a Code block. In Shopify, paste it into any HTML section or custom Liquid template.
Making the Embed Responsive
The default iframe uses fixed pixel dimensions. Wrap it in a responsive container when the page needs fluid sizing:
1<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">
2 <iframe
3 src="https://www.google.com/maps/embed?pb=!1m18!..."
4 style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
5 allowfullscreen=""
6 loading="lazy"
7 referrerpolicy="no-referrer-when-downgrade">
8 </iframe>
9</div>
This technique uses bottom padding to maintain a 16:9 aspect ratio while filling the container width.
Pros
- Completely free, no usage limits
- No API key or Google Cloud account required
- Google handles hosting, CDN, and updates
Who Should Use This
The iframe embed is an option for a business that needs a map on a contact page. Compare the other approaches if you need additional interactions or location-management workflows.
Option 2: Google Maps JavaScript API
The Google Maps JavaScript API gives you full programmatic control over the map. You can place custom markers, add info windows, implement clustering for large datasets, draw shapes, add custom styling, and build any interaction you can imagine. This is what developers use when they need a highly customized map experience.
What It Costs
As of 2026, the Maps JavaScript API gives you 10,000 free map loads per month. After that, it costs $7.00 per 1,000 loads. If you're also using geocoding, directions, or places autocomplete, each of those has its own pricing tier.
For a complete breakdown, see our Google Maps API pricing guide.
What a custom build needs
A map with a marker is the easy part. For a store locator, the JavaScript API leaves these jobs to you:
- Your locations in a database, with a way to edit them
- Geocoding to turn addresses into coordinates
- Address search with suggestions, and results sorted by distance
- Filters, a results list and a details panel
- A phone layout, marker clustering for long lists and error states
- Opening hours, directions links and any analytics you want
AI tools can write much of this now. Who keeps it working afterwards is the bigger decision, and build a store locator with AI, or use StoreRocket? covers it.
Pros
- Complete control over every aspect of the map
- Custom markers, styling, and interactions
- Location count is application-defined
- Access to the entire Google Maps Platform (directions, places, geocoding)
- Build exactly what you need
Cons
- Requires an API key and Google Cloud billing account
- Costs money after 10,000 loads/month ($7 per 1,000 additional)
- Requires JavaScript development skills
- You're responsible for all maintenance, updates, and bug fixes
Who Should Use This
Consider the JavaScript API for custom map overlays, route planning, delivery tracking, or other application-defined interactions.
Option 3: Google Maps Embed API (URL-Based Embeds)
The Maps Embed API uses URL parameters to configure map views without custom JavaScript.
How It Works
Instead of copying an embed code from Google Maps, you construct a URL with parameters that control the map's behavior:
1<!-- Place mode: show a specific location -->
2<iframe
3 width="600"
4 height="450"
5 style="border:0"
6 loading="lazy"
7 allowfullscreen
8 referrerpolicy="no-referrer-when-downgrade"
9 src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Empire+State+Building,New+York+NY">
10</iframe>
1<!-- Directions mode: show route between two points -->
2<iframe
3 width="600"
4 height="450"
5 style="border:0"
6 loading="lazy"
7 allowfullscreen
8 referrerpolicy="no-referrer-when-downgrade"
9 src="https://www.google.com/maps/embed/v1/directions?key=YOUR_API_KEY&origin=Brooklyn+Bridge&destination=Empire+State+Building&mode=walking">
10</iframe>
Available Modes
The Embed API supports five modes:
- Place mode: Centers the map on a specific place or address with a marker
- Directions mode: Shows a route between an origin and destination, with support for driving, walking, bicycling, and transit
- View mode: Shows a map with no markers at a specific location and zoom level
- Street View mode: Shows an interactive Street View panorama at a location
- Search mode: Shows results for a search query (like "pizza near Times Square")
Pros
- Unlimited usage, completely free
- More control than the basic iframe (directions, search, specific modes)
- No JavaScript required
Cons
- Requires an API key (but no billing charges for Embed API)
Who Should Use This
The Embed API supports URL-configured views such as directions and search results without custom JavaScript.
Option 4: No-Code Map Widget Tools
For businesses that need more than a basic embed but don't have developers to build a custom map, no-code map widget tools fill the gap. These are purpose-built solutions that give you an interactive, searchable, multi-location map you can embed on any website with a code snippet.
How They Work
The general process is the same across most tools:
- Sign up for an account
- Add your locations (manually, via CSV import, or through an integration)
- Customize the look and feel (colors, markers, layout, branding)
- Copy a small embed code (usually a script tag or iframe)
- Paste it into your website
The widget handles map rendering, search, filtering, directions and analytics. You manage your locations through a dashboard, and changes appear on your website automatically.
What You Get vs. What You Build
This is the key distinction from the JavaScript API approach. With a no-code tool, you get these features out of the box:
- Search by location, zip code, or address with autocomplete
- Filtering by category (store type, services, products)
- Directions integration so customers can navigate to your locations
- Custom markers and branding that match your website
- A phone layout that adapts from the desktop map
- Analytics showing what people search for and which locations they click (plan-dependent)
- Bulk import so you can upload thousands of locations from a spreadsheet
- Location details with address, phone, website and opening hours
Popular No-Code Map Widget Tools
StoreRocket is a store locator widget. It supports Google Maps and Mapbox, lets you set the design and every word it shows, offers analytics and a lead form (both depend on the plan, see pricing), and works on any website that accepts an HTML or embed block.
Storepoint publishes an analytics dashboard with search heatmaps, location-request leads, custom fields and buttons, Google Sheets sync, and Google Maps plus Mapbox support.
Elfsight offers a Google Maps widget as part of a larger widget marketplace.
The tool you choose depends on how many locations you have, what features you need, and your budget. For a detailed comparison, see our best store locator software roundup.
Pros
- No coding required
- Built-in search, filtering, directions, and analytics
- A phone layout by default
- The vendor maintains the hosted locator
- Usually includes a location management dashboard
Cons
- A monthly subscription cost
- A third-party service to depend on, and with some tools, StoreRocket included after the trial, you also pay the map provider for usage
- Feature sets vary significantly between tools, so compare what each one publishes
Who Should Use This
Businesses with multiple locations that want search, filtering, or analytics without building the application from scratch.
Comparison: All Four Options Side by Side
Here's how the four approaches compare across the features that matter:
| Feature | Free iframe | Embed API | JavaScript API | No-Code Widget Tool |
|---|---|---|---|---|
| Cost | Free | Free | $7/1K loads after 10K free | Plan-based |
| API Key Required | No | Yes | Yes | Provider-dependent |
| Map modes | Shared place or map | Place, view, directions, Street View, search | Application-defined | Product-dependent |
| Search | — | Search mode | Build it yourself | Built-in |
| Filtering | — | — | Build it yourself | Built-in |
| Custom Markers | — | — | Yes | Yes |
| Custom Styling | — | — | Yes | Yes |
| Directions | Depends on shared map | Directions mode | Build it yourself | Built-in |
| Analytics | — | — | Application-defined | Provider-dependent |
| Mobile Optimized | Manual CSS | Manual CSS | Build it yourself | Built-in |
| Location Management | N/A | N/A | Build it yourself | Built-in dashboard |
| Maintenance | Google-hosted | Google-hosted | Application-owned | Provider-dependent |
| Technical Skill | None | Basic HTML | JavaScript developer | None |
| Lead Capture | — | — | Application-defined | Provider-dependent |
A dash means that option does not provide the capability on its own; you would need to build something around it.
The JavaScript API gives you application-defined behavior, while no-code products publish different features and limits.
How to Choose the Right Google Maps Widget
The decision tree is simpler than it seems. Answer these questions:
How many locations do you have?
For one location, compare the free iframe with the Embed API. For multiple locations, compare the JavaScript API and no-code products against your search, filtering, and data-management requirements.
Do you need search?
If visitors need nearest-location search against your own dataset, compare a JavaScript API implementation with products that publish that workflow.
What's your budget?
No software budget: Evaluate the free iframe or Embed API against the required map workflow.
Monthly subscription budget: Compare no-code products by documented features and limits.
Custom-development budget: If you have specific needs that no off-the-shelf tool can handle, a custom JavaScript API implementation is the way to go. Factor in developer salary, not just API costs.
Do you need analytics?
If analytics matters, verify what each product publishes. A JavaScript API implementation can send application events to your chosen analytics system.
What are your technical skills?
The JavaScript API requires development and maintenance capacity for JavaScript, API configuration, mobile behavior, and performance.
How to Add a Google Maps Widget to Your Platform
The embed process varies slightly depending on your website platform. Here's a quick overview for the most popular ones:
WordPress
WordPress supports Custom HTML blocks in the Gutenberg editor. Paste your iframe or script tag there. For more control, many page builders (Elementor, Divi, WPBakery) have dedicated HTML widgets. If you're using a no-code tool like StoreRocket, you paste the embed code into a Custom HTML block, or use the free StoreRocket plugin's block or shortcode. For a detailed walkthrough, see our WordPress store locator guide.
Shopify
For a simple iframe, add it to any page with the Custom Liquid section. For StoreRocket, install the app from the Shopify App Store and it creates a Store Locator page for you. See our Shopify store locator guide for complete instructions.
Squarespace
Squarespace has a Code Block that accepts HTML. Drop your iframe or embed code there. Squarespace also supports code injection in the site header, which is useful for script-based embeds that need to load on every page. Our Squarespace store locator guide covers the full process.
Wix
Wix provides an HTML iFrame element in the editor. Drag it onto your page, switch to code mode, and paste your embed code. Read our guide on adding a store locator to Wix.
Webflow
Webflow has an Embed element that accepts custom HTML and script tags. Drag it onto your canvas and paste your code. See our Webflow store locator guide.
Other Platforms
Most website platforms support embedding custom HTML somewhere, including Drupal, Joomla, BigCommerce, Magento and custom-built sites. Find where your platform lets you add HTML and paste the embed code there. For StoreRocket, copy the code from the Install page in your dashboard.
Common Mistakes to Avoid
Check these common implementation problems:
Using iframes for Multiple Locations
For multiple locations, verify that the chosen approach supports the search and filtering workflow you need.
Not Making the Map Responsive
A Google Maps iframe with hardcoded dimensions may overflow a narrow layout. Use the responsive wrapper shown earlier and test it on the production page.
Leaving API Keys Unrestricted
If you're using the JavaScript API or Embed API, your API key is visible in your page's source code. If you don't restrict it to your domain in the Google Cloud Console, anyone can copy it and use it on their own site, running up charges on your account. Always set HTTP referrer restrictions on your API keys. Google makes this easy in the Credentials section of the Cloud Console.
Ignoring Page Load Performance
Measure the page before and after adding the map. Use loading="lazy" on iframes, and consider initializing a JavaScript map only when it approaches the viewport.
Forgetting About Mobile Users
Many visitors will use a phone. Test the map on an actual phone, not just the browser's responsive mode. Tap the markers, try directions, and check whether the information windows are readable.
Embedding Maps Without Context
A map alone isn't very useful. Pair it with supporting content: a search box for finding locations, a list view alongside the map, filters for location types, and clear calls to action like "Get Directions" or "Call This Location." The map is one piece of a larger user experience, not the whole thing.
The Bottom Line
Adding a Google Maps widget to your website comes down to what you need:
For a single location with no interactivity, the free iframe embed is the simplest option.
For a custom map application with specific technical requirements, the JavaScript API gives you full control at the cost of development time and maintenance overhead.
For a business with multiple locations that needs search, filtering, and analytics, compare no-code store locator tools against a custom JavaScript API build.
StoreRocket gives businesses with several locations 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.
More resources to help you decide:
- How to add a store locator to your website
- Store locator examples from real brands
- Best store locator software in 2026
- Google Maps API alternatives
Frequently Asked Questions
How do I add a Google Maps widget to my website for free?
The simplest free method is the iframe embed. Go to Google Maps, search for your location, click Share, select "Embed a map," copy the HTML code, and paste it into your website. This works on WordPress, Squarespace, Wix, Shopify, and any platform that supports custom HTML. The Embed API is also free and gives you slightly more control through URL parameters. For a free tool that generates the code for you, try our Google Maps embed generator.
Is the Google Maps widget free?
It depends on which type you use. The basic iframe embed and the Embed API are both free with no usage limits. Dynamic Maps includes 10,000 free monthly loads, then charges $7 per 1,000 in its first paid band. On a paid StoreRocket project, you connect your own Google Maps or Mapbox key and that provider bills its usage directly. For a detailed cost breakdown, see our Google Maps API pricing guide.
How do I embed a Google Maps widget with multiple locations?
For multiple locations, compare a custom Google Maps JavaScript API implementation with no-code store locator widgets. Learn more in our guide on how to put multiple locations on Google Maps.
What's the best Google Maps widget for WordPress?
For a single location, the free iframe embed works fine in a Custom HTML block. For multiple locations with search and filtering, StoreRocket provides a store locator widget that embeds with a code snippet, so it works in WordPress without a plugin. A free StoreRocket plugin adds it with a block or shortcode if you prefer. There are also WordPress-specific plugins like WP Google Maps. See our best store locator for WordPress comparison for a full breakdown.
Do I need an API key for Google Maps widget?
For the basic iframe embed (copy-paste from Google Maps), no. The Embed API requires a key but has unlimited free usage. The JavaScript API requires a key and billing; Dynamic Maps includes 10,000 free monthly loads before paid usage begins. For no-code widget tools, API-key requirements vary by provider. If you want to understand how API keys work, read our guide on how to use Google Maps API free.
Can I customize the look of a Google Maps widget?
The JavaScript API publishes Map Styles and custom overlays. For the basic iframe, Embed API, and no-code tools, compare the customization controls in their current documentation.
Which Google Maps widget is best for SEO?
Whichever widget you choose, include useful crawlable content and links around the map. For a deeper look, read our store locator SEO guide.
What are the alternatives to Google Maps for a website widget?
Google Maps is the most popular but not the only option. Mapbox is a strong alternative that offers more customization and competitive pricing. OpenStreetMap provides open map data, but production tiles and geocoding require policy-compliant public-service use, self-hosting, or a provider. For a comprehensive comparison of map providers and their pricing, see our guide to Google Maps alternatives and our Google Maps vs Mapbox comparison.