Skip to content
Make maps

Google Maps embed code generator

Search for the address, pick the map type, zoom and size, and copy the code to paste into your website. With no key, with your Google key, or with OpenStreetMap.

Place or address

Example 47.620510, -122.349280 · You can also type coordinates: “47.6205, -122.3493”.

How you embed it

The most used and the simplest: no account or key. It’s not the official way: that URL isn’t in Google’s documentation, so it works today but could change without notice.

What the map looks up

With the address, Google shows the place’s info card. With the coordinates, the pin goes on the exact spot.

Map type

15 · Roughly: 1, the world; 5, a continent; 10, a city; 15, streets; 20, buildings.

Size

Fills the full width of its space and keeps its shape: it looks right on phones.

More options

The map doesn’t load until the visitor scrolls to it, so the page opens faster.

Screen readers read it out: say what the map shows.

How much of your page’s address the map service receives.

Code to paste into your website

<iframe
  src="https://maps.google.com/maps?q=Space+Needle%2C+Seattle%2C+WA&t=m&z=15&output=embed"
  style="border:0;width:100%;height:auto;aspect-ratio:4/3"
  allowfullscreen
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  title="Map of Space Needle, Seattle, WA">
</iframe>

Preview

When you press it, your browser loads the map from Google’s servers, which get your IP address and may set cookies. That’s why it doesn’t load on its own.

100% × 4:3

Next step

More tools to make your map.

Map with pinsA map with many pins, to download or share. Address to coordinatesThe coordinates of one address, or many. Draw on a mapDraw lines and areas and take them as KML or GeoJSON.

How to use it

  1. Find the place

    Type the address, the name of the place or coordinates. Choose whether the map looks up the address (with Google’s info card) or puts the pin on the exact spot.

  2. Choose how it looks

    Roadmap or satellite, zoom and size: fixed, in pixels, or responsive, which fills the full width and keeps its shape on phones.

  3. Copy and paste

    Press “Copy the code” and paste it into an HTML block on your site. To see how it looks first, press “Show the preview”.

Three ways to embed the map

  • Google, no key

    With the URL https://maps.google.com/maps?q=…&output=embed. It’s the most used because it needs nothing, but it’s not the official way: it isn’t in Google’s documentation and could stop working without notice. The official way without a key is the “Share › Embed a map” button in Google Maps.

  • Google, with your key

    The Maps Embed API, the official way. Google offers it free with unlimited loads, and you don’t need to code: just a key. To get one, you create a Google Cloud project with billing turned on.

  • OpenStreetMap, no Google

    The embeddable map from openstreetmap.org, with open data and no account. It has no satellite view or place cards, and the OpenStreetMap Foundation offers it with no guarantees: for a high-traffic site, use your own or a paid map service.

What the tool does

It builds the map URL from your choices and puts it in an <iframe>, the HTML tag that shows one page inside another. The code always has a title (for screen readers), a borderless style and, if you leave it checked, loading="lazy", so the map doesn’t slow down your page.

With the responsive size, the iframe takes 100% of the width and its height comes from the aspect ratio (CSS aspect-ratio), so it isn’t cut off or left with gaps on phones. For OpenStreetMap, the zoom is turned into the bounding box its map asks for (bbox), worked out for that size.

Everything happens in your browser: Mapsfera doesn’t get your key or your searches. The address search uses Photon, and the preview only loads if you ask for it.

How to get a free key and restrict it

A Maps Embed API key is free and Google doesn’t charge for map loads, but it will ask for a card to turn on billing for the project. The steps, according to Google’s documentation:

  1. Go to the Google Cloud console with your Google account, create a project and turn on billing for it.
  2. Enable the “Maps Embed API” for that project.
  3. In Google Maps Platform, under “Keys & Credentials”, create an API key.
  4. Restrict the key to the Maps Embed API (API restriction) and to your website (application restriction by websites), with your domain, for example https://www.yoursite.com/*.
  5. Paste the key here, under “Google, with your key”, and copy the code.

The key is visible in your page’s code: anyone can read it. That’s why you restrict it to your domain. Google warns that you’re responsible for charges caused by abuse of an unrestricted key.

How to paste it into WordPress, Wix, Squarespace or Shopify

Almost every platform has a block or an element for pasting HTML. The general steps, according to each one’s help pages:

WordPress

In the block editor, add a “Custom HTML” block and paste the code. On WordPress.com, depending on your plan, the editor may strip iframes: if it disappears when you save, check what your plan allows.

WordPress.com support: Custom HTML block

Wix

In the editor, add the element for embedding code (“Embed HTML”, under embed code), click “Enter Code”, paste the code and resize the element.

Wix Help Center: embedding a site or a widget

Squarespace

Add a Code block, choose HTML mode and paste the code. Some plans don’t allow iframes in Code blocks: if it doesn’t show, check your plan.

Squarespace Help Center: Code blocks

Shopify

In the theme editor, add a “Custom Liquid” section and paste the code. On a page, you can also use the “Show HTML” (<>) button in the content editor.

Shopify Help Center: online store pages

Cookies and consent

When a page loads a Google map, each visitor’s browser connects to Google’s servers, which get the visitor’s IP address and may set cookies. With OpenStreetMap, the browser connects to openstreetmap.org, which also gets the IP address.

In the European Union, under the ePrivacy Directive and the GDPR, many data protection authorities take the view that a site must ask visitors for consent before loading third-party content that sets cookies, such as a Google map. That’s why many sites don’t load the map until the visitor accepts cookies or presses a button, as this page’s preview does.

This is general information, not legal advice: what your site needs depends on its situation. If in doubt, check with whoever handles the legal side of your site.

Frequently asked questions

Is it free to embed Google Maps on a website?

Yes. The no-key way needs no account. The official way, the Maps Embed API, is free with unlimited loads according to Google, though to get a key you create a Google Cloud project with billing turned on.

Why isn’t the no-key way the official one?

Because that URL (maps.google.com/maps?…&output=embed) isn’t in Google’s documentation: it works and lots of sites use it, but Google could change or remove it without notice. The official ways are the Maps Embed API and the “Share › Embed a map” button in Google Maps.

Is my Google key safe here?

It stays in your browser: Mapsfera doesn’t receive or store it (only if you check “Remember it”, in this browser’s storage). On your site, though, the key is visible in the code, as with any embedded map: restrict it to your domain and to the Maps Embed API.

How do I make the map look right on phones?

Choose the “Responsive” size. The map will fill the full width of its space and its height will follow the aspect ratio you pick (16:9, 4:3 or square). With a fixed size, a 600 px wide map runs off the screen on many phones.

Can I show the map in satellite view?

Yes, with Google: choose “Satellite” as the map type. The OpenStreetMap embed has no satellite view.

What do loading="lazy" and title do?

loading="lazy" tells the browser not to load the map until the visitor gets to it, so the page opens faster. The title describes the map for people using a screen reader, which reads it out when it reaches the iframe.

Which referrerpolicy should I choose?

If you’re not sure, keep the default: for the no-key code, the one Google uses when you share (no-referrer-when-downgrade); with a key, the one its documentation recommends (strict-origin-when-cross-origin). If your key is restricted to your site, don’t use no-referrer: Google wouldn’t know which site is asking for the map and would block it.

Why doesn’t the preview load by itself?

Because loading a Google map makes your browser connect to Google, which gets your IP address and may set cookies. This way, you decide whether it loads.

Related tools

All tools
US county map Explore every US county on an interactive map colored by Census data such as population or income. County map with cities Pick a US county and see it on the map with all its cities and towns, ready to print or download. Printable map worksheets Print blank-map worksheets with questions and an answer key, ready as a PDF for class or home. Map quiz Learn states, countries and capitals by finding them on a blank map. No sign-up, with a class challenge link.

Sources