Need help embedding a Google Map on my website

General
1

I’m trying to embed a Google Map into a page on my small business website, but I’m confused about the correct steps and code to use. I’m not sure if I should use an iframe, the Maps Embed API, or something else, and I also want to be sure it works on mobile and doesn’t slow down the site. Can someone walk me through the best way to embed a Google Map, including any settings or API keys I should know about?

2

Use this rule of thumb:

• Simple map on a public page, no custom code, no billing → use the iframe from Google Maps
• Anything dynamic or fancy → use the JavaScript Maps API
• Embed API is kind of the “official” iframe method, but for most small biz sites, the plain iframe from maps.google.com is enough

Quick way with iframe (no API key):

  1. Go to https://maps.google.com
  2. Search your business name or address
  3. Click “Share”
  4. Click “Embed a map”
  5. Pick size
  6. Copy the iframe code

It looks like:

  1. Paste that into your page HTML where you want the map.

For WordPress:

• Switch the editor to “Text” or “HTML” mode
• Paste the iframe there
• Do not paste it in the visual editor if it strips tags

When to use Maps Embed API instead of the copy paste iframe:

• You want things like “Place mode”, “Directions mode”, or Street View
• You need some control over parameters with an API key

Example with Embed API and your API key:

Steps for that:

  1. Go to Google Cloud Console
  2. Create a project
  3. Enable “Maps Embed API”
  4. Create an API key, restrict it to your domain
  5. Replace YOUR_API_KEY in the iframe

JavaScript Maps API is only worth the effort if you need:

• Custom markers loaded from a database
• Custom styles
• Multiple markers and interaction
• Click handlers and events

Then you add this in HTML:

For a basic biz site, start with the simple iframe from the “Share → Embed a map” dialog. It is fast, free, and you skip the API key and billing mess. If you later need more control, move to Embed API or JS API.

If it looks blank:

• Check browser console for blocked mixed content
• Make sure src starts with https
• Make sure no CSS hides the iframe (height not zero, display not none)

3

If your goal is “show my location on a page so people can find me,” there are basically 3 levers: how much control you want, how much pain you’ll tolerate, and how much you care about usage limits.

@caminantenocturno already covered the copy/paste iframe and the proper APIs really well, so I’ll skip redoing the tutorial and focus on how to choose.

1. Plain iframe from Google Maps site

Use this if:

  • You just want a single map with your biz pinned
  • You don’t care about fancy modes, custom styles, or events
  • You don’t want to mess with API keys or Google Cloud

Pros:

  • No billing setup
  • Basically no maintenance
  • Works fine for small traffic

Cons:

  • Very little control
  • If Google ever changes the “share → embed” output, you have to re-copy

Honestly, for a local shop, this is usually enough, even though it feels a bit “hacky.”

2. Maps Embed API (still iframe, but with key)

I slightly disagree with the idea that most small sites should always skip this. If you:

  • Want to lock the key to your domain for safety
  • Need specific modes like directions, place, or street view by URL param
  • Plan to use the same map / config across multiple pages

then using the Embed API with an API key is a nice middle ground. Setup is a bit annoying once, then it’s reusable. Also easier to keep consistent sizing and behavior by controlling the URL yourself instead of re-copying Google’s auto generated one.

3. JavaScript Maps API

Only choose this if any of the following are true:

  • You need to load multiple markers from data
  • You want to control map behavior via JS (click handlers, info windows, custom styling)
  • You care about performance tweaking, events, clustering, etc.

Otherwise you’re paying a complexity tax for nothing. I’ve seen a ton of small sites ship a full JS Maps API just to show a single pin, which is like renting a semi-truck to move a shoebox.

Things people forget that break the map:

  • Dropping the iframe into a builder that silently strips it or wraps it in a weird sandbox
  • Parent container has height: 0 or overflow: hidden
  • Using http on your site with an https map source (or vice versa)
  • Cookie / content blockers: some privacy plugins or browsers can block Google domains, so test in another browser or incognito

If you post what you’re building with (plain HTML, WordPress, Wix, Squarespace, etc.) and what “level” of map you actually want (1: simple pin, 2: directions, 3: full custom interaction), it’s pretty easy to say “use X, ignore Y” and give you the exact snippet to paste.

4

If your goal is “show a map so people find my shop,” think in terms of risk and maintenance, not just features.

@caminantenocturno nailed the “how to” for iframe / Embed API / JS API, and @suenodelbosque did a good job outlining when each makes sense. Where I’d push back a bit:

They both assume you’ll stay on Google Maps forever. That is usually true, but not always.

1. Before you pick a method, answer 3 questions

  1. How likely are you to redesign the site in the next year?
  2. Do you care if the map briefly breaks during a theme/plugin change?
  3. Do you want to be free to swap Google out in the future?

If you are a small business with a DIY site, treat the map as “replaceable.” That affects what you choose:

  • Simple iframe: easiest to replace, but also easiest for page builders to break when you switch themes.
  • Embed API with key: slightly more setup, but easier to reuse the same snippet everywhere.
  • JS API: powerful, but you are now maintaining code, and future you might hate current you.

2. Practical choice by site type

  • Pure HTML / hand coded
    Go with either the basic iframe or the Embed API iframe. The JavaScript API is overkill unless you are already comfortable editing JS.

  • WordPress / page builders
    This is where I disagree a bit with “just paste the iframe”: many builders strip iframes or wrap them oddly. A safer pattern is:

    • Use their built-in “Custom HTML” or “Embed” block only.
    • Avoid pasting the iframe into rich text widgets.
    • If your theme or builder has a “map” block, test it, but remember many of those use their own keys and can hit usage limits later.

  • Hosted platforms (Wix, Squarespace, etc.)
    Often have a native map block that handles keys behind the scenes. Only fight for a custom Google snippet if you specifically need Google branding or functions.

3. What I’d actually do for a small biz

  • If traffic is modest and you just need a pin:

    • Start with the simple copied iframe from the “share / embed” panel like @caminantenocturno described.
    • Wrap it in a container div with a fixed aspect ratio so it does not break layouts in future redesigns.
    • Add loading='lazy' to help page speed if it is not already there.

  • If you suspect you will add directions or multiple locations later:

    • Bite the bullet once and set up Maps Embed API with a key.
    • Save that key and your iframe template somewhere (even a doc) so you can paste new addresses without ever revisiting the cloud console.

4. Things almost nobody checks, but you should

  • Accessibility:
    The map is not enough for some users. Add your address as plain text and a “Get directions” link. That also helps if the map is blocked by privacy extensions.

  • Performance:
    One map is fine. Multiple embedded maps on a single page, even if they are iframes, can slow things down. Consider one map plus a list of addresses if you have branches.

  • Legal / privacy:
    If you operate in privacy strict regions and use consent banners, test what happens when “marketing” or “third party” cookies are rejected. Your map might vanish. If so, show a fallback link like “Open location in Google Maps.”

5. If the map is not showing up

Instead of redoing their troubleshooting lists, focus on the two annoying edge cases:

  • Some WordPress security or optimization plugins actually strip the src attribute or rewrite it.
  • Some corporate firewalls block Google domains, so always test from a normal home or mobile network before assuming your code is broken.

If you ever decide to move off Google, competitors like OpenStreetMap or Mapbox can be integrated similarly, but they usually require committing to a JS-based solution from the start. That is one more reason why, unless you know you will customize heavily, starting with a simple Google iframe keeps your map easy to rip out and replace later.