Embed A Map
Create a map
Platform guides

Paste it where you build

The same snippet works everywhere HTML is allowed. Pick your platform for the exact clicks — each guide takes under two minutes.

Plain HTML — and what each line does

If you write your own pages, paste the snippet where the map should render. Here is the anatomy so you know exactly what you’re shipping.

1

Generate your snippet

Build the map in the generator and copy the responsive version. It looks like this:

<div style="position:relative;width:100%;padding-bottom:75%;height:0;overflow:hidden;border-radius:8px;">
  <iframe
    src="https://maps.google.com/maps?q=Your%20Place&t=m&z=15&hl=en&output=embed"
    style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"
    loading="lazy" allowfullscreen
    referrerpolicy="no-referrer-when-downgrade"
    title="Map of Your Place">
  </iframe>
</div>
2

Understand the anatomy

The wrapper div reserves the map’s aspect ratio (padding-bottom:75% = 4:3), so the page never jumps while loading. loading="lazy" defers the map until it’s scrolled near. title keeps screen readers happy. referrerpolicy is the value Google recommends for embeds.

3

Paste and publish

Drop the block anywhere inside <body>. No script tags, no CSS files, no dependencies — it’s a self-contained rectangle.

Fixed-size instead? Switch the code tab in the generator to “Fixed size” for a plain width="600" height="450" iframe — handy inside email-style table layouts or rigid grids.

WordPress

Works with the block editor (Gutenberg), the classic editor and every major page builder.

1

Copy your snippet from the generator

Use the responsive version — WordPress themes vary in column width and the map will always fit.

2

Add a “Custom HTML” block

In the post editor press +, search for Custom HTML, and paste the snippet into the block.

3

Preview and publish

Click the block’s Preview toggle to see the live map inside the editor, then publish. Done.

Classic editor? Switch the editor to the Text (not Visual) tab before pasting — the Visual tab escapes iframes. Elementor / Divi: use their “HTML” or “Code” widget, same paste.

Shopify

Perfect for the “visit our store” section on contact or about pages.

1

Open the page in the admin

Go to Online Store → Pages and open the page that should carry the map (or create one).

2

Switch the editor to HTML

Click the <> button in the rich-text toolbar. You’re now editing the page source.

3

Paste the snippet and save

Paste where the map belongs, save, and view the storefront. The responsive wrapper adapts to your theme’s content width automatically.

Theme sections: for maps inside a theme section (footer, contact section), paste the same snippet into a Custom Liquid block in the theme editor instead.

Wix

Use the embed element — Wix sandboxes it correctly and the map stays interactive.

1

Add an embed element

In the editor choose Add (+) → Embed Code → Embed HTML. A resizable box appears on the canvas.

2

Paste the snippet

Click Enter Code, paste your Maplet snippet, and press Update. The live map renders inside the box.

3

Size the box

Drag the element to the width you want — with the responsive snippet the map fills the box at any size you choose.

Tip: Wix’s own “Google Maps” app works too, but it can’t do directions, Street View, terrain style or language control — pasting Maplet code keeps all of that.

Squarespace

Code blocks are available on all current Squarespace plans for iframe embeds like this one.

1

Edit the page

Open the page, click Edit, and hover where the map should sit until the insert points appear.

2

Insert a Code block

Click the + insert point, pick Code from the menu, and paste the snippet. Keep the block’s mode on HTML.

3

Save

The editor shows a placeholder; the live site shows the interactive map. Check it after saving.

Seeing a grey box in the editor? That’s normal — Squarespace only renders third-party embeds on the published site, not inside the editing canvas.

React / Next.js

The embed is a plain iframe, so it drops into JSX directly — just camelCase the attributes.

1

Create a small component

export function MapEmbed({ src, title, ratio = 75 }) {
  return (
    <div style={{ position: 'relative', width: '100%',
                  paddingBottom: `${ratio}%`, height: 0, overflow: 'hidden' }}>
      <iframe
        src={src}
        title={title}
        loading="lazy"
        allowFullScreen
        referrerPolicy="no-referrer-when-downgrade"
        style={{ position: 'absolute', inset: 0,
                 width: '100%', height: '100%', border: 0 }}
      />
    </div>
  );
}
2

Use it with your generated URL

<MapEmbed
  src="https://maps.google.com/maps?q=Your%20Place&t=m&z=15&hl=en&output=embed"
  title="Map of Your Place"
/>

Copy the src value from the generator’s code panel — it carries all your settings (style, zoom, language, mode).

Next.js note: this is a pure client-rendered rectangle with no hydration cost — no 'use client' needed, it works in Server Components as-is.