Short answer: Use the official Google Maps Embed API. Get a free API key, drop a single iframe into your page with mode set to a map, place or streetview, and add a little CSS to make it responsive. No JavaScript required.
I embed maps on client sites all the time, and the cleanest current method is Google's own Maps Embed API. It lets you show a road map, satellite view, a specific place, directions, or an interactive Street View panorama, all through one iframe. Here is how I set it up from scratch.
What is the Maps Embed API?
The Maps Embed API is Google's officially supported way to put a map on a web page using a plain iframe rather than loading the full JavaScript maps library. It supports several modes, including place, view, directions, search and, the one people most often want, streetview. Because it is just an iframe, it works on any site including static HTML, WordPress and most CMS platforms.
Do I need an API key, and is it free?
Yes, you need a free API key, and for the Embed API the standard map, place, directions, search and Street View embeds are offered at no cost. Here is how to get the key.
- Go to the Google Cloud Console and create or select a project.
- Open APIs & Services > Library and enable Maps Embed API.
- Go to APIs & Services > Credentials and click Create credentials > API key.
- Copy the key. Immediately restrict it (more on that below).
How do I embed a standard map?
Once you have a key, a basic place map is a single iframe. Replace YOUR_API_KEY and the query with your own values.
<iframe
width="600" height="450"
style="border:0"
loading="lazy"
allowfullscreen
referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Brandenburg+Gate,Berlin">
</iframe>How do I embed Street View?
This is the mode the classic embed dropped, and the Embed API brings it back cleanly. Use the streetview mode and give it coordinates plus an optional heading and pitch.
<iframe
width="600" height="450"
style="border:0"
loading="lazy"
allowfullscreen
src="https://www.google.com/maps/embed/v1/streetview?key=YOUR_API_KEY&location=52.5163,13.3777&heading=210&pitch=10&fov=90">
</iframe>The location is latitude and longitude, heading is the compass direction the camera faces, pitch tilts up or down, and fov sets the zoom. I grab the coordinates by right-clicking the spot in Google Maps and copying the lat/long.
How do I make the embed responsive?
The fixed width and height look wrong on phones. I wrap the iframe in a container that keeps a 16:9 ratio so it scales with the page.
<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
<iframe
style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;"
loading="lazy" allowfullscreen
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Eiffel+Tower,Paris">
</iframe>
</div>Embed modes at a glance
| Mode | Shows | Key parameter |
|---|---|---|
| place | A pin on a specific location | q |
| view | A map centered on coordinates | center |
| directions | A route between points | origin, destination |
| search | Results for a query | q |
| streetview | An interactive panorama | location or pano |
A tip most guides skip: restrict your API key
Because the key sits in your public HTML, anyone can read it. The fix is not to hide it, it is to restrict it. In the Cloud Console, edit the key and add an HTTP referrer restriction listing only your own domains, and limit the key to the Maps Embed API only. Now even if someone copies your key, it will not work on their site and cannot be used for other paid Google APIs. Skipping this is the most common mistake I see, and on paid APIs it can lead to a surprise bill.
Frequently asked questions
Do I really need an API key to embed a Google Map?
Yes. The official Maps Embed API requires a free API key. Get one in the Google Cloud Console by enabling the Maps Embed API and creating an API key credential.
Can I still embed Street View panoramas?
Yes. Use the streetview mode of the Maps Embed API with a location or pano ID plus optional heading, pitch and field of view parameters. It produces an interactive panorama inside an iframe.
Is the Maps Embed API free?
The standard map, place, view, directions, search and Street View embeds through the Maps Embed API are offered at no cost. Always confirm current pricing in the Google Maps Platform documentation.
How do I stop others from stealing my API key?
Restrict the key in the Cloud Console. Add an HTTP referrer restriction limiting it to your own domains, and restrict it to only the Maps Embed API so it cannot be abused for other services.
Comments
Post a Comment
If you have anything in mind, please let me know!