Embed Google Map

Embed a Map to your Website

Search for a location, adjust the map as you want, copy the code and paste it into your site’s HTML code & embed a map on your website. Get an iframe for a place, directions and street view for free.

No API key No sign-up Unlimited maps Free forever

Location business, address or landmark

Map style

Zoom level

Marker pinDrop a pin on the searched location

Starting point

Destination

Travel mode

Panorama location

Camera heading 0° = north

305°

Camera pitch tilt up / down

5°

Pick a location from the suggestions list so the panorama gets exact coordinates — then aim the camera with the sliders.

Map language

Embed size

Responsive embedFluid width — fills any container

Live preview Open in Google Maps

600 × 450 px

Why Choose the Embed a Map

Features of Our Map Eembed Generator

Most embedded maps just let you choose the map type, select height, width and get the code. The embed a map provides you with multiple options that let you know about the accuracy of the location.

Zero setup, zero keys

No Google Cloud project, no API key, no billing account. The embed works with a plain iframe that never expires.

Truly live preview

Every knob — zoom, style, language, camera angle — repaints the actual map as you adjust it. What you see is exactly what ships.

Device-checked, responsive

Preview at desktop, tablet and phone widths before you copy. The responsive snippet keeps its aspect ratio in any container.

Three map modes

A pinned place is just the start — embed turn-by-turn directions or an aimed Street View panorama from the same editor.

Maps in your language

Ship the map labelled in any of 14 languages — including full right-to-left support for Urdu and Arabic sites.

Code you’d write yourself

Lazy-loading, accessible titles, correct referrer policy — the snippet follows current best practice, not 2012 copy-paste.

How it works

Three steps, no documentation required

Search your place

Type a business name, address or landmark and pick it from the live suggestions. Or switch modes for directions and Street View.

Style the map

Choose road, satellite, hybrid or terrain. Set zoom, language and size — the preview repaints instantly as you adjust.

Copy & paste

Grab the responsive snippet and paste it into any HTML block — WordPress, Shopify, Wix, Squarespace or hand-written pages.

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.

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>

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.

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.

Copy your snippet from the generator

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

Add a “Custom HTML” block

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

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.

Open the page in the admin

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

Switch the editor to HTML

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

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.

Add an embed element

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

Paste the snippet

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

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.

Edit the page

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

Insert a Code block

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

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.

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>
  );
}

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.

Choose your view

Different Map Types Available

Our embedded maps tool provides 3 different options for map embedding. These options are place, direction and street view. Let’s understand each type:

Place

Pinpoint a location

Click on “Place” Map type to get a pinpoint location. You can locate a business, an address or a landmark. Below this, the “Map style” option is available.

RoadThe standard view — roads, streets, landmarks and place names.

SatelliteReal-world imagery of buildings, landscape and natural features.

HybridSatellite imagery with road names, boundaries and place information.

TerrainHighlights physical features — mountains, hills, forests and elevation.

Moreover, you can select the Zoom level — pick a higher or lower digit as you like. Besides this, the marker pin option lets you pinpoint your selected location.

Directions

Show the way

Click on the “Directions” Map type to get directions to the selected location. First of all, type the starting point and select the location from the suggestions. Now type your destination — you will see a blue line from your starting point to the destination.

You need to tell your travel mode as well. Based on your selected mode, our tool will highlight the way — you can choose driving, walking or cycling. After that, copy the embedded Google Maps code and use it as you like.

Street View

Explore at street level

The last Map type is “Street View”. You first need to add the “Panorama Location” — the exact place you want to look at. Keep in mind you must add a precise location; a country name alone will not show anything. For example, selecting “Colosseum, Rome” lets you view it as if you were present in that moment. You can also drag the mouse up and down or click the arrows to move forward or look upward.

Beneath the location option, the Camera heading and Camera pitch options are available. These control your movement — how much, and to what degree, you can move or look up and down.

Available everywhere

Shared controls across every map type

Map language, embed size and the responsive embed option are available on all Map types. You can choose from 14 different languages, including RTL languages like Urdu and Arabic. You can also pick any embed size — Small, medium, large or wide. And if you are worried whether it fits your user’s screen, the responsive embed option adjusts the Map to your visitor’s screen automatically.

14 languages Urdu & Arabic RTL 4 embed sizes Responsive option

Every setting updates the live preview, so you can see the finished map before you copy the code.

Honest comparison

Where Maplet stands

The free-generator field is crowded but shallow. Here is what actually differs.

Capability	Maplet	Typical free generators	Maps JavaScript API
API key / billing account	Not needed	Not needed	Required
Live preview while editing	Yes — every option	Partial or on-submit	You build it
Directions & Street View modes	Built in	Rarely	Via code
Responsive snippet + device preview	Yes	Checkbox at best	You build it
Map language control	14 languages	Usually none	Via code
Deep-linkable presets & examples	Yes	No	n/a
Cost at any traffic level	Free	Free	Usage-billed

FAQ

Questions people actually ask

Is Maplet really free?

Yes. The generator produces a standard Google Maps iframe, which Google serves at no cost. There is no account, no quota and no watermark — and the code keeps working after you leave this site.

Do I need a Google Maps API key?

No. API keys are only needed for the JavaScript API — programmatic maps with custom markers and data layers. For showing a location, directions or a panorama, the classic embed URL works without any key or billing setup.

Will the map slow my website down?

Maplet’s snippet ships with loading="lazy", so the browser only fetches the map when a visitor scrolls near it. Above-the-fold content is unaffected, and Core Web Vitals stay clean.

How do I make the map responsive?

Leave the “Responsive embed” switch on. The generated snippet wraps the iframe in an aspect-ratio container, so the map fills 100% of whatever column you paste it into — from a phone screen to a wide desktop layout.

Can I embed directions instead of a single pin?

Yes — switch the editor to Directions mode, set a start and destination, and choose driving, walking or cycling. Visitors see the route immediately and can take over navigation in Google Maps with one tap.

Does it work on WordPress, Shopify and Wix?

Anywhere you can paste HTML, the embed works. We keep step-by-step instructions for WordPress, Shopify, Wix, Squarespace, plain HTML and React in the platform guides.

Is embedding Google Maps like this allowed?

Yes. The iframe loads Google’s own embed endpoint, with attribution and terms intact — the same mechanism Google’s “Share → Embed a map” button uses. Maplet never scrapes, proxies or modifies map tiles.

Your map is thirty seconds away

Scroll up, type a place, copy the code. That’s the whole product.

Create your map