Google Maps Embed Generator
Map embed code with a title, lazy loading and an aspect-ratio wrapper, and a straight answer about the keyless form versus the documented Embed API.
Form keyless, maps.google.com
Zoom 16
Aspect ratio 16 / 9
Lazy loaded yes
HTML
<div class="map-embed">
<iframe
src="https://maps.google.com/maps?q=British%20Library%2C%20London&z=16&output=embed"
title="Map of British Library, London"
width="100%"
height="100%"
style="border:0"
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
allowfullscreen
></iframe>
</div>
CSS
.map-embed {
aspect-ratio: 16 / 9;
width: 100%;
}
.map-embed iframe {
display: block;
width: 100%;
height: 100%;
}
This is the keyless form: the ordinary Maps page in an iframe with
output=embed, which hides the chrome. It works today and it is not a
documented API, so nothing promises it will keep working. For a map on a
page that matters, get a key and use the Embed API, which is documented,
versioned and free at any volume.
The iframe has a title, which is what a screen reader announces; without
one it is read as "frame" and nothing else. "Map of British Library,
London" is a description of the destination rather than of the widget,
which is the useful thing to hear.
loading="lazy" keeps the map out of the initial load, which matters
because a Maps iframe pulls several hundred kilobytes and runs its own
JavaScript. Remove it only if the map is above the fold and is the
reason people came.
The wrapper carries the aspect ratio so the iframe has a size before it
loads. Without it the frame is 150 pixels tall by default, the layout
shifts when the map arrives, and that shift is what Cumulative Layout
Shift measures.
Loading this iframe sets Google cookies and sends the visitor's IP
address to Google before they have agreed to anything. Under GDPR that
is consent-gated in most readings, which is why a lot of sites show a
placeholder with a "load map" button and only insert the iframe when it
is clicked. A link to the map is also a perfectly good answer.
Output is valid and updates as you type.
Fix the highlighted fields to update the output.
There are two ways to embed a Google map, and every tutorial shows one of them without mentioning the other.
The keyless form, maps.google.com/maps?q=…&output=embed, needs no account and works
today. It is not a documented API: it is the ordinary Maps page in an iframe with a
parameter that hides the chrome. Google can change it whenever it likes.
The Embed API form, google.com/maps/embed/v1/place?key=…, is documented, versioned
and free at any volume. It needs an API key, and the key sitting visibly in your HTML is
fine as long as you restrict it to your own domains.
This generates either, and it adds the three things an embed needs regardless: a title, lazy loading, and a wrapper with an aspect ratio.
How to use
- Pick what to show and type the place, address or coordinates.
- Leave the key field empty for the keyless form, or paste a Maps Embed API key.
- Set the zoom and the aspect ratio.
- Copy the HTML and the CSS.
Example
<div class="map-embed">
<iframe
src="https://maps.google.com/maps?q=British%20Library%2C%20London&z=16&output=embed"
title="Map of British Library, London"
width="100%"
height="100%"
style="border:0"
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
allowfullscreen
></iframe>
</div>.map-embed {
aspect-ratio: 16 / 9;
width: 100%;
}
.map-embed iframe {
display: block;
width: 100%;
height: 100%;
}Three details in there are the difference between an embed and a liability. The title
is what a screen reader announces; without it the frame is read as “frame” and nothing
else. loading="lazy" keeps several hundred kilobytes of script and tiles out of the
initial page load. The aspect-ratio on the wrapper gives the frame a size before it
loads, so the page does not jump when the map arrives.
Pitfalls
An iframe with no title is unusable with a screen reader. It is announced as an unlabelled frame. One sentence fixes it, and the sentence should describe the place, not the widget: “Map of the British Library” rather than “Google Maps embed”.
A Maps iframe is expensive. It loads its own JavaScript and tiles, and that is several hundred kilobytes before anything of yours finishes. Lazy load it unless the map is the reason people came to the page.
Without a set size, the frame defaults to 150 pixels tall. Then the map loads and the layout moves, which is exactly what Cumulative Layout Shift measures and what Google’s own performance report will penalise. The aspect ratio on the wrapper is the fix.
It sets cookies before anyone agrees to anything. Loading the iframe sends the visitor’s IP to Google and sets Google cookies. Under GDPR that is consent-gated on most readings, which is why many sites show a static image or a placeholder with a “load map” button and insert the iframe on click. A plain link to the map is also a perfectly good answer, and it costs nothing.
An unrestricted API key in public HTML is a real risk. The key is visible by design, so restrict it: in the Google Cloud console, set an HTTP referrer restriction to your domains and limit the key to the Maps Embed API. An unrestricted key can be used by anybody, on your account, for the APIs that do charge.
The keyless form can break without warning. It has worked for years and it is not a promise. If the map is load-bearing for your business, spend the twenty minutes getting a key.
Directions embeds need the API. The keyless form can show a place or a search and nothing else.
Compatibility
Everything runs in the browser: nothing is uploaded and nothing is stored, and no request is made to Google from this page.
aspect-ratio has been in every current browser since 2021, and loading="lazy" on
iframes since 2020 in Chrome and Edge and 2022 in Safari and Firefox. An older browser
ignores the attribute and loads the frame eagerly, which is the old behaviour rather than
a break.
The Maps Embed API is free with no usage cap, which is unusual among Google’s maps products and worth knowing: the JavaScript Maps API and the Static Maps API both bill per load, and the Embed API does not. If you need a pin, a route or a search in an iframe, there is no cost argument for the keyless hack.
referrerpolicy="no-referrer-when-downgrade" is Google’s own recommendation for the
embed and means the full URL is sent over HTTPS and nothing over HTTP.