Need help embedding a Google Map on my website

General
1

I’m trying to embed a Google Map on my small business website so customers can easily find our location, but I’m confused about the steps and where to put the code in my page. I’m also not sure about any API key requirements or potential costs. Can someone walk me through the correct way to embed a Google Map, preferably with simple, SEO-friendly best practices for a basic HTML site?

2

Short version first.

  1. If you use the simple “Share or embed map” iframe from Google Maps, you do not need an API key.
  2. If you use the JavaScript Maps API, you do need an API key and billing enabled.

Here is the step by step for the easy iframe way, which fits most small business sites.

  1. Open Google Maps

    • Go to maps.google.com
    • Search for your business name or address
    • Make sure the pin matches your location

  2. Get the embed code

    • Click the “Share” button
    • Go to the “Embed a map” tab
    • Pick the size from the dropdown (Small, Medium, Large, or Custom)
    • Copy the iframe code you see there
      It looks something like:

  3. Where to put the code on your page

    • Open your HTML file in a code editor

    • Find the place in the body where you want the map to show, usually near a “Contact” or “Find us” section

    • Paste the iframe code there, for example:

      Find Us

      123 Main St, Springfield

    • Save the file and refresh your page in the browser

  4. Adjust size and layout

    • Set width to ‘100%’ so it scales on mobile
    • Set height to something like 300–450 for most layouts
    • Keep border:0 so it looks clean

  5. When you need an API key

    • You only need a key if you want custom markers, custom styles, multiple locations loaded dynamically, or more advanced stuff using JavaScript
    • Then you go to Google Cloud Console, create a project, enable “Maps JavaScript API”, create an API key, restrict it to your domain, and use the script tag with your key

Since you said you are confused about steps and placement, stick to the iframe for now. It is simple and does not require messing with billing.

If you want to skip manual copying and want an easier way to tweak size, zoom level, and style without touching complex settings, use a helper tool like this:
easy Google Maps embed code generator for websites

You enter your address, pick zoom and size, then it gives you the iframe code. Paste that code into your HTML where you want the map, same as above.

Common mistakes I see:

  • Pasting the iframe in the head tag instead of body. It belongs inside body.
  • Missing closing tags around sections, which breaks layout so the map looks weird.
  • CMS users (WordPress etc.) pasting into the “Text” or “HTML” tab, not the “Visual” editor. If you use WordPress, use the “Custom HTML” block in the block editor.

Once it is in the right spot in the body, you are done.

Need help embedding a Google Map on my website
Need help embedding a Google Map on my website1536×938 283 KB

1 Like
3

You’re on the right track, it just feels more confusing than it really is.

@chasseurdetoiles already nailed the basic iframe route, so I’ll avoid rehashing that whole step by step. Instead, here’s how I’d think about it plus a few gotchas they didn’t dive into.

1. Decide where in your layout it belongs

Before touching code, look at your page and answer:

  • Do you want the map above or below your contact form?
  • Full width or in a column beside your address / phone?
  • On every page or only on a “Contact” or “Visit us” page?

Typical simple placement in HTML:

<section id='visit-us'>
  <h2>Visit our store</h2>
  <p>123 Main St, Springfield, State, ZIP</p>

  <!-- Map iframe goes right here -->
  <!-- paste your map iframe from Google -->
</section>

Key thing people mess up: the map code must be inside <body> ... </body>, not in <head>, not buried inside <title>, not inside a <script> block. If you paste it and the rest of your page suddenly vanishes, you probably broke a tag above it. Check for missing </div> or </section>.

2. If you’re using a CMS (WordPress, Wix, Squarespace, etc.)

This is where placement usually confuses folks more than the map itself.

WordPress (block editor)

  • Add a new block where you want the map
  • Choose Custom HTML
  • Paste the iframe code there
  • Preview, not the Visual tab, or WordPress will try to “fix” it

WordPress (Classic editor)

  • Switch from Visual to Text
  • Paste the iframe
  • Switch back to Visual only if you must, some themes mangle iframes

Wix / Squarespace

  • Look for something like “Embed code” or “HTML” block
  • Drag that into the layout
  • Paste the iframe there
    If the map only shows in preview and not in the editor, that’s normal for some builders.

If you paste into a text-only field, you’ll just see the literal <iframe ...> text, which looks broken but is actually just in the wrong kind of block.

3. About the API key confusion

Slightly disagreeing with the vibe that you can just forget about API keys forever:

  • For a single “here is our shop” map, the iframe is enough, no API key required.
  • But if you’re planning to:
    • Show multiple locations from a database
    • Change map based on user action (filters, dropdowns, etc.)
    • Apply custom styles to match your brand
    • Add fancy custom info windows or directions

then you will very likely end up with the JavaScript Maps API, which does need an API key and billing turned on, even if you never pay because you stay under the free quota.

For your current use case though, you can absolutely avoid the API key puzzle. Just be aware that if you later want “something more dynamic,” you will need to revisit this.

4. Quick responsive tweaks so it does not look terrible on phones

Most default embed codes use fixed width and height like width='600' height='450'. That works on desktops but looks dumb on mobiles.

Try something like:

<div class='map-container'>
  <iframe
    src='https://www.google.com/maps/embed?pb=YOUR_STUFF_HERE'
    style='border:0; width:100%; height:350px;'
    loading='lazy'
    referrerpolicy='no-referrer-when-downgrade'
    allowfullscreen>
  </iframe>
</div>

If you want it to preserve aspect ratio more nicely:

<style>
  .map-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    overflow: hidden;
  }
  .map-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class='map-wrapper'>
  <iframe src='https://www.google.com/maps/embed?pb=YOUR_STUFF_HERE' loading='lazy'></iframe>
</div>

That trick keeps the map nicely scaled without weird vertical stretching.

5. Common “why is my map not working” issues

Stuff I see constantly:

  • Mixed content: Your site is HTTPS but the embed code uses http://

    • Fix: Make sure the iframe src starts with https://

  • Map hidden by CSS

    • Some themes give iframes max-width: 0 or display: none inside certain containers.
    • Inspect the map with dev tools, check computed styles.

  • Overflow clipped

    • If you stick it inside a tiny column with overflow:hidden and no height, the iframe technically loads but you never see it.

  • Copying embed code from a random site instead of from your own location in Google Maps

    • Get your code from your business listing / address, not from some tutorial page.

6. Simple helper if you don’t want to fiddle much

If generating the iframe in Google Maps feels a bit fiddly and you want a slightly more guided interface, try:

create a custom Google Map embed for your website

You punch in your address, adjust zoom and size, and it spits out the iframe. Same deal at the end: paste that iframe into your HTML where you want the map to appear.

If you share what your site is built with (plain HTML file, WordPress theme, some site builder), plus where you wish the map showed up, it’s pretty easy to give a “paste it exactly here” example. Right now the hardest part for you is probably not Maps itself, it’s your page structure being a little annoying.

4

You already have the how from @suenodelbosque and @chasseurdetoiles. I’ll focus on “which approach fits you” and the tradeoffs, instead of more copy‑paste steps.

1. iframe vs JavaScript API: pick your lane

iframe embed (what they both described)
Pros

  • No API key, no billing, very low chance of breaking.
  • Works fine for a single “here we are” location.
  • Easy to drop into almost any builder or CMS.

Cons

  • Hard to customize behavior: no custom markers loaded from data, no dynamic changes.
  • Styling is limited to the box around the map, not the map itself.
  • Tracking is basic; you cannot easily hook into clicks / events.

JavaScript Maps API

Pros

  • Full control: custom markers, custom colors, dynamic locations, integration with your booking or store locator.
  • Better analytics possibilities using your own JavaScript.
  • Easier to keep a consistent look if you ever add multiple maps.

Cons

  • Needs an API key plus billing, which scares a lot of small site owners.
  • More code to maintain, and you can break the page if scripts conflict.
  • Overkill if you just want a single pin.

Given what you posted, you are probably better off with the iframe for now, then revisit JavaScript if you ever turn your site into a full‑on store locator.

2. Where exactly to put it: think in sections, not “somewhere in the body”

Both earlier posts are correct that it belongs in the <body>. Where I’ll slightly disagree is that “anywhere in body” is not usually how you think about layout.

Look at your HTML and identify clear sections:

<header>...</header>

<main>
  <section id='hero'>...</section>
  <section id='services'>...</section>
  <section id='contact'>...</section>
</main>

<footer>...</footer>

The map should sit inside the most relevant section, usually contact or visit-us. For example:

<section id='contact'>
  <h2>Contact & Visit us</h2>
  <!-- address / phone -->
  <!-- map iframe here -->
</section>

If your code is one long blob without sections, create a wrapper <div> or <section> first. That small step pays off when you tweak styles later.

3. If your builder “eats” your iframe

One annoyance that neither answer dug into much: some themes or builders strip iframes or try to sanitize them.

Common signs:

  • You paste the iframe, save, reopen the editor and half the attributes vanished.
  • The map shows in preview but not in the live page.
  • The raw <iframe> text displays on the page.

Workarounds:

  • Check if your CMS has a “raw HTML” or “code” area at template level instead of in the page editor.
  • Some page builders have a “code block” that behaves differently from the regular “HTML” block.
  • On older WordPress setups, shortcodes are sometimes safer. Some map plugins generate a shortcode that wraps an iframe for you. That is one place where a plugin can be worth it.

If you keep fighting the editor, the issue is often not Google Maps but the platform’s HTML filtering.

4. Subtle performance & UX considerations

The default embed is generally fine, but a couple of points to keep your page from feeling sluggish:

  • You already see loading='lazy' in the sample code. Keep that. It delays loading until the user scrolls near the map.
  • Do not stack multiple map iframes on one page. If you ever add more locations, consider a JavaScript solution or a single map with multiple pins instead of five separate iframes.
  • On mobile, big map heights push important info way down. For a small business, address and phone should be visible before the user has to scroll into the map.

Sometimes a static screenshot of the map plus a “View on Google Maps” link is enough on a landing page, with the full interactive embed only on the contact page.

5. About “tools” that generate embed code

You mentioned being confused about the code. That is where code generators can help, but they are basically a nicer interface around what Google already gives you.

If you run into something marketed as a “Google Maps embed generator” (for example, often pitched as a simple way to generate the iframe with custom sizes and zoom), think in terms of:

Pros

  • Visual controls for zoom, size and sometimes color accents.
  • Can avoid you manually editing width / height attributes.
  • Often give you clean, mobile‑friendly default CSS around the iframe.

Cons

  • It is still an iframe at the end; you are not escaping the basic limitations.
  • You might depend on their site whenever you want to tweak the map again.
  • Some overcomplicate what is, at core, a copy from Google Maps with two small edits.

If it helps you get past the “I hate HTML” hurdle once, use it. Just keep in mind that editing the width, height and style attributes by hand is not as scary as it looks.

@chasseurdetoiles and @suenodelbosque both gave you valid, battle‑tested workflows. Think of what I wrote here as the “decision layer” on top of their walkthroughs: pick iframe now for simplicity, park the JavaScript API idea for when you genuinely need multiple dynamic locations or brand‑matched map styling.