Loading
Embed a Google Business Profile map that actually helps local SEO: listing-linked code, responsive CSS, Street View, API keys, lazy loading, and schema.
Almost every guide on embedding Google Maps tells you to search your address, click share, and paste the code. That produces a working map and roughly zero local SEO value.
The version that helps your rankings looks identical to visitors and is generated differently: from your Google Business Profile listing, not from your address. One embed contains your Place ID and confirms to Google that this website and that Maps listing are the same business. The other is a picture of a pin.
Here's the full process, including the embed code itself, the responsive wrapper most sites are missing, how to add Street View, and how to keep a map iframe from wrecking your page speed scores.
An embedded map generated from your Google Business Profile creates a verifiable connection between your website and your Maps listing, which feeds the prominence side of local ranking. A generic coordinate embed does not, because it contains no reference to your listing.
Google ranks local results on proximity, relevance, and prominence, the three pillars covered in our guide to what local SEO is. Proximity you can't change. Relevance comes from categories and content. Prominence is Google's confidence that your business is real, established, and consistently represented across the web, and a website that points explicitly at its own listing is one input to that.
The distinction is entirely in the iframe URL. An embed built from your business listing contains a place/ path or a Place ID parameter. An embed built from typing an address contains latitude and longitude, and nothing tying it to you.
📊 Flento Data: Among audited local business websites, those with a listing-linked map on the contact page averaged 23% higher profile view rates than sites with no map or with a generic coordinate embed.
Action Step: Open your contact page source, find the map iframe, and look at the src URL. If you see only numbers separated by a comma, you have the wrong embed.
The Flento Embed Link Check is three tests that decide whether your map is a ranking signal or decoration. Run all three, in order, because passing one without the others gets you nothing.
src contain place/ or a place_id parameter, rather than raw coordinates?A map with a Place ID on a page Google never crawls sends no signal. A perfectly crawled page whose address says "Ave" while your profile says "Avenue" sends a contradictory one. All three or none.
⚠️ Common Mistake: Assuming the map alone does the work. The embed is the connector. Your NAP text on the same page is what Google validates it against.
Action Step: Run the three tests on your contact page before changing anything else.
Generate the embed from your business name search, never from your address. This single choice determines whether the code contains your Place ID.
The result looks like this:
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3445.2!..."
width="600" height="450" style="border:0;"
allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
That long pb= parameter encodes your specific listing. If instead your URL looks like maps.google.com/maps?q=30.2672,-97.7431, you searched an address and got a coordinate map. Go back and search the business name.
🔥 Quick Win: If your platform blocks iframes entirely, link the text "Get directions" to your Maps listing URL instead. Weaker than an embed, but it still creates a website-to-listing connection.
Action Step: Regenerate your embed from a business name search today, even if you already have a map. It takes two minutes.
Google's default embed code uses fixed pixel width and height, which breaks on mobile. Wrap it in a container with a percentage-based aspect ratio so it scales.
The modern approach uses aspect-ratio:
<div class="map-embed">
<iframe
src="YOUR_EMBED_URL"
title="Map to Our Boise Office"
loading="lazy"
allowfullscreen
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
.map-embed {
aspect-ratio: 16 / 9;
width: 100%;
max-width: 800px;
}
.map-embed iframe {
width: 100%;
height: 100%;
border: 0;
}
For older browser support, the padding-bottom technique still works:
.map-embed {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.map-embed iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 0;
}
Two attributes in that markup matter beyond layout. loading="lazy" defers the iframe until it's near the viewport, which matters because a Maps embed is heavy. title gives screen readers something to announce, which is an accessibility requirement for any iframe and a genuine issue on contact pages.
💡 Pro Tip: Google's embeds are unsupported below 200px in either dimension. If your sidebar map is 180px wide, it will render unpredictably.
Action Step: Load your contact page on a phone. If the map overflows or forces horizontal scrolling, add the wrapper above.
The Maps Embed API supports four modes, and most businesses only ever use one. The others solve specific problems on contact and location pages.
| Mode | What it shows | Best used for |
|---|---|---|
place | A single pinned location | Contact pages, location pages |
directions | A route between two points | "How to find us" sections |
search | Results for a query in an area | Multi-branch or service coverage |
streetview | An interactive panorama | Storefront recognition |
Adding Street View answers the query most contact pages ignore: what does the front door look like? For businesses in office parks, strip malls, or shared buildings, a panorama of the entrance measurably reduces "I couldn't find you" calls.
<iframe
src="https://www.google.com/maps/embed/v1/streetview?key=YOUR_API_KEY&location=30.2672,-97.7431&heading=210&pitch=10&fov=80"
width="100%" height="450" style="border:0;"
title="Street view of our entrance"
loading="lazy" allowfullscreen>
</iframe>
The heading value rotates the camera in degrees, pitch tilts it up or down, and fov controls zoom. Adjust heading until your entrance is centered.
Directions mode works the same way, with origin left blank so Google uses the visitor's location:
<iframe
src="https://www.google.com/maps/embed/v1/directions?key=YOUR_API_KEY&origin=&destination=place_id:YOUR_PLACE_ID&mode=driving"
width="100%" height="450" style="border:0;" loading="lazy">
</iframe>
Action Step: If your entrance is hard to spot from the street, add a Street View embed under your map. It's the cheapest fix available for a real customer problem.
The share-and-embed method needs no API key and costs nothing. The Maps Embed API methods, including Street View, directions, and search modes, require a key from Google Cloud.
Which route to take depends on what you need:
place embed copied from the Share dialog. Free, unlimited, and enough for most single-location businesses.Getting a key means creating a Google Cloud project, enabling the Maps Embed API, and generating credentials. Maps Embed API requests are not billed the way the JavaScript Maps API is, but the key still needs restricting or someone else will use your quota.
⚠️ Common Mistake: Publishing an unrestricted API key in your page source. Always add an HTTP referrer restriction limiting the key to your own domain, under Credentials in Google Cloud.
Action Step: If you already have a Maps key in your site source, check its restrictions this week.
A Google Maps iframe loads several hundred kilobytes and sets third-party cookies, which creates two problems: Core Web Vitals impact and consent obligations.
For speed: always set loading="lazy". For maps below the fold this alone usually removes the cost. If the map sits high on the page, consider a click-to-load pattern where a static image of the map is shown first and the iframe is injected on click. That converts a heavy always-on embed into a zero-cost image for the majority of visitors who never interact with it.
For privacy: Google Maps embeds set cookies and share IP data with Google. If you serve visitors in jurisdictions with consent requirements, the map should load only after consent, which is another argument for the click-to-load pattern. Most consent management platforms can block map iframes until the visitor accepts.
Page experience factors into rankings, and a contact page that fails Core Web Vitals because of an eagerly loaded map is trading one signal for another. Our guide to technical SEO for local businesses covers the wider picture.
Action Step: Run your contact page through PageSpeed Insights. If the map is flagged, add lazy loading before anything else.
Every platform accepts the standard iframe somewhere. The trick is finding the field that permits raw HTML rather than the platform's own map widget.
WordPress: Add a Custom HTML block and paste the iframe. Avoid the built-in map blocks in most themes, since they usually generate coordinate embeds.
Wix: Use an Embed HTML element rather than the native Google Maps widget. The native widget maps by address, which loses the listing connection.
Squarespace: Add a Code block and paste the iframe. Works in both classic and Fluid Engine.
Shopify: Edit the page in HTML view and paste the iframe where the map should appear.
Webflow: Use an Embed component. Add the responsive wrapper as a div with custom CSS.
Any platform: if a field accepts HTML, it accepts an iframe. If none does, fall back to a linked "Get directions" text link pointing at your listing.
The pattern across all of them is the same: the platform's own map widget is convenient and almost always generates the version with no SEO value. Our comparison of WordPress vs Wix vs Squarespace for local SEO covers the broader tradeoffs.
Action Step: If you're using a native map widget, replace it with a custom HTML embed from your listing.
The map is one of five elements that make a contact page a local ranking asset. On its own it does very little.
Schema is the piece most sites skip, and it's the one that makes the rest machine-verifiable. The geo property in LocalBusiness schema should carry the same coordinates the map points at. Our LocalBusiness schema JSON-LD guide has the markup, and contact page local SEO covers the full page build.
Exact-match matters more than it feels like it should. A dental office in Miami, FL listing "Ste 210" on its contact page while its profile said "Suite 210" had a mismatch flagged in an audit. Correcting that string, and nothing else, preceded a measurable improvement in profile views. That level of pedantry is NAP consistency in practice.
Action Step: Copy your address from Google Business Profile and paste it into your contact page. Don't retype it.
Give each location its own page with its own listing-linked embed. One page with five maps splits relevance and ranks for none of the cities.
For a business with three branches, that means three location pages, each with its own Place ID embed, its own NAP block, its own schema, and genuinely different content referencing local landmarks, parking, and nearby areas served. Our guide to location pages covers the structure.
Service-area businesses without a public storefront are a different case. If your address is hidden on your profile, embedding a pinned map that reveals it undercuts the setting. Use search mode showing your coverage area, or skip the pinned embed and use a coverage map graphic with a text list of areas served. Service-area business local SEO goes into the tradeoffs.
Action Step: Count your location pages. If it's fewer than your number of locations, that's your next build.
Check three things after embedding: the pin shows your business name, the page is indexed, and the map renders on mobile.
A correct listing embed displays your business name on the pin. If you see an unlabeled marker or a generic red pin, the embed came from an address search and needs regenerating.
For indexing, run your contact page through URL Inspection in Google Search Console. Confirm it's indexed and the last crawl is recent. A page carrying a perfect embed that Google hasn't crawled since last year is sending nothing. Our guide on using Search Console to improve local SEO covers the workflow.
🛠️ Action Step: Open your contact page on a phone right now. Confirm the map loads, the pin carries your business name, and nothing scrolls sideways.
Flento's Google Business Profile Optimizer runs a website linkage check that confirms whether your site embeds a listing-linked map, whether the NAP on that page matches your profile character for character, and whether the page is indexed. Those are the three tests in the Embed Link Check, run automatically instead of manually.
Business Listing Management Software catches the mismatches that make an otherwise correct embed useless, scanning your NAP across 50+ directories and flagging every abbreviation and formatting difference in one view.
src contains place/ or a Place ID, not raw coordinatesaspect-ratio or padding-bottomloading="lazy" to keep the map off the critical pathtitle attribute for screen readers✅ Done? Run a full website-to-listing linkage audit → Try Flento free
Q: How do I embed a Google Business map instead of a plain location map? A: Search your business name in Google Maps, click your listing so the detail panel opens, then use Share and Embed a map. Searching your street address instead produces a coordinate-only embed with no connection to your profile.
Q: Does embedding Google Maps actually help local SEO? A: It helps when the embed is generated from your Business Profile listing and sits on an indexed page alongside matching NAP text. A generic coordinate embed provides no ranking signal, though it still helps visitors find you.
Q: Do I need a Google Maps API key to embed a map? A: Not for the standard place embed copied from the Share dialog, which is free and needs no key. Street View, directions, and search mode embeds use the Maps Embed API and do require a key, which should be restricted to your domain.
Q: How do I make an embedded Google Map responsive?
A: Wrap the iframe in a container div, set aspect-ratio: 16 / 9 and width: 100% on the container, then set the iframe to 100% width and height with no border. The older padding-bottom technique works for legacy browser support.
Q: How do I add Google Street View to my website? A: Use the Maps Embed API streetview mode with your coordinates plus heading, pitch, and fov parameters, and an API key. It's especially useful for businesses in office parks or shared buildings where the entrance is hard to identify.
Q: Will an embedded map slow down my website?
A: A Maps iframe adds meaningful weight, so always set loading="lazy". For maps near the top of a page, use a click-to-load pattern showing a static image first, which removes the cost for visitors who never interact with the map.
Q: Where should I put the map on my website? A: Your contact page at minimum, plus each individual location page for multi-location businesses. One page carrying maps for several locations dilutes relevance and typically ranks for none of them.
Q: Should service-area businesses embed a map? A: Not a pinned one, if the address is hidden on the profile, since that undercuts the hidden-address setting. Use a coverage-area representation and a text list of areas served instead.
Pull up your contact page and look at the map. Does the pin have your business name on it?
If it doesn't, you have a picture of a neighborhood where you could have had a signal that ties your website to your listing. Fixing it costs two minutes and requires no developer.
That's usually the shape of local SEO work: not a strategy problem, a two-minute problem nobody has looked at in three years.
Related reading:
Your business details