Every business with a physical presence needs a map on its website. From a single-location coffee shop to a brand with 500 retail partners, showing customers where to find you is a basic expectation. The phrase "Google Maps widget" covers several different approaches.
The truth is that "Google Maps widget" can mean very different things depending on what you actually need. A one-pin iframe embed for your contact page? A fully interactive multi-location map with search and filtering? A custom-coded mapping application? Each option has different costs, different technical requirements, and different trade-offs.
This guide covers every way to add a Google Maps widget to your website in 2026, with honest pros and cons for each approach. By the end, you'll know exactly which option fits your situation and how to implement it.
#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.
Related: Google Maps API pricing breakdown | Google Maps vs Mapbox | Google Maps embed generator
#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.
#Basic Code Example
Here's a minimal example that displays a map with a single custom marker and an info window:
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Store Location</title>
5 <style>
6 #map { height: 500px; width: 100%; }
7 </style>
8</head>
9<body>
10 <div id="map"></div>
11 <script>
12 function initMap() {
13 const location = { lat: 40.7128, lng: -74.0060 };
14
15 const map = new google.maps.Map(document.getElementById('map'), {
16 zoom: 14,
17 center: location,
18 mapId: 'YOUR_MAP_ID' // Required for Advanced Markers
19 });
20
21 const marker = new google.maps.marker.AdvancedMarkerElement({
22 map: map,
23 position: location,
24 title: 'Our Store'
25 });
26
27 const infoWindow = new google.maps.InfoWindow({
28 content: `
29 <div style="padding: 8px;">
30 <h3 style="margin: 0 0 4px;">Our Store</h3>
31 <p style="margin: 0;">123 Main Street, New York, NY</p>
32 <p style="margin: 4px 0 0;">
33 <a href="https://www.google.com/maps/dir/?api=1&destination=40.7128,-74.0060"
34 target="_blank">Get Directions</a>
35 </p>
36 </div>
37 `
38 });
39
40 marker.addListener('click', () => {
41 infoWindow.open(map, marker);
42 });
43 }
44 </script>
45 <script
46 src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
47 async defer>
48 </script>
49</body>
50</html>
Replace YOUR_API_KEY with your actual Google Maps API key and YOUR_MAP_ID with a Map ID from the Google Cloud Console. Note that Advanced Markers (the current recommended approach) require a Map ID.
#Adding Multiple Markers
For multiple locations, you'd typically store your location data in an array and loop through it:
1const locations = [
2 { lat: 40.7128, lng: -74.0060, name: 'New York Store', address: '123 Main St' },
3 { lat: 34.0522, lng: -118.2437, name: 'Los Angeles Store', address: '456 Sunset Blvd' },
4 { lat: 41.8781, lng: -87.6298, name: 'Chicago Store', address: '789 Michigan Ave' }
5];
6
7locations.forEach(loc => {
8 const marker = new google.maps.marker.AdvancedMarkerElement({
9 map: map,
10 position: { lat: loc.lat, lng: loc.lng },
11 title: loc.name
12 });
13
14 const infoWindow = new google.maps.InfoWindow({
15 content: `<h3>${loc.name}</h3><p>${loc.address}</p>`
16 });
17
18 marker.addListener('click', () => {
19 infoWindow.open(map, marker);
20 });
21});
For larger datasets, assess clustering, search, geolocation, pagination, error handling, mobile behavior, and performance.
#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 four 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
- 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 everything: map rendering, search, filtering, directions, mobile optimization, 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
- Mobile optimization that works on every device
- Analytics showing what locations people search for and click on
- Bulk import so you can upload thousands of locations from a spreadsheet
- Individual location pages with full details, hours, photos
#Popular No-Code Map Widget Tools
StoreRocket is a store locator widget designed for businesses of all sizes. It supports Google Maps and Mapbox, offers full customization, includes analytics and lead capture, and works on any website with a simple embed code.
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
- Mobile-optimized by default
- Ongoing updates and maintenance handled for you
- Usually includes a location management dashboard
#Cons
- A monthly subscription cost
- A third-party service to depend on, and no map API bills to manage yourself
- 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 the capability is not part of that vendor's published plan list or product page. It is not a statement that the product cannot do it, and their sales or support team is the right place to confirm.
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 a shortcode. For a detailed walkthrough, see our WordPress store locator guide.
#Shopify
Shopify's theme editor lets you add custom code through sections and Liquid templates. For a simple iframe, you can add it to any page using the Custom Liquid section. For a widget embed code, create a new page template or add the script to your theme's layout file. 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. Drupal, Joomla, BigCommerce, Magento, custom-built sites, the process is always the same: find where your platform lets you add HTML, and paste the embed code there. If you can edit HTML, you can add a Google Maps widget.
#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
Over 60% of map interactions happen on mobile devices. 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.
#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; StoreRocket covers geocoding when locations are imported. 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 simple code snippet and works in WordPress without requiring a plugin. 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. Apple Maps has an embeddable option for Safari users. For a comprehensive comparison of map providers and their pricing, see our guide to Google Maps alternatives and our Google Maps vs Mapbox comparison.
#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 is built specifically for this last category. It provides search, filtering, directions, analytics, and lead capture in an embeddable store locator.
Try StoreRocket free and see how it compares to what you're using today. If a basic embed is all you need, we've helped you set that up too. Either way, your customers should be able to find you.
More resources to help you decide: