Embed a Map on a Website: All Providers

Overview

You want to embed a map on a website—fast, clean, and reliable. Maybe it’s a single pin on your contact page, a store locator, or directions to an event. The good news: most needs are covered by a simple map iframe. The only real choice is which provider suits your design, budget, and privacy expectations.

If you lean toward Google, start with our detailed walkthrough in the step‑by‑step guide to embed a Google Map and the broader comparison in ways to show Google Maps on your site. Prefer open data? See the OpenStreetMap embed instructions.

This guide stays provider‑agnostic. You’ll learn the quickest embed paths, responsive patterns that work across CMSes, and clear tradeoffs around cost, branding, and compliance. By the end, you’ll know when a basic map iframe is enough—and when it’s worth moving up to a more customizable approach.

Add provider embeds sitewide with MicroEdits

You already have a live site. You don’t want to wrangle templates, dig through a theme editor, or wait on a developer. MicroEdits lets you describe the change—add this map to my contact page and the store locations footer—and it just happens. It’s built for existing websites on any platform and speaks in plain English.

• Fast: Paste any provider’s embed once, and apply it across multiple pages, headers, or footers instantly.
• Safe to try: Preview changes, share them for review, and revert if you change your mind.
• No coding: You describe the change; MicroEdits applies it. No files, no deploys.

Add one map, or roll out the same block across every location page. It’s the practical path when your site is already up and you want consistent embeds with minimal effort.

Google Maps iframe (quickest path)

If your goal is to embed Google Maps on your website with minimal fuss, use the built‑in Google iframe. It’s the fastest route to a reliable, familiar map.

Steps:

1. Open Google Maps and find the place or view you want.
2. Click Share → Embed a map.
3. Choose size, copy the iframe.
4. Paste it into your page or block editor.

Minimal example:

<div class="map-wrap">
  <iframe
    src="https://www.google.com/maps/embed?pb=YOUR_EMBED_PARAMS"
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
    allowfullscreen
  ></iframe>
</div>

Pros:

• Familiar UI and data: Users recognize it; directions and details feel native.
• No API key for the iframe: Simple copy‑paste.
• Reliable coverage: Strong worldwide mapping.

Cons:

• Branding you can’t remove: Google logo, UI, and colors.
• Limited customization: Beyond sizing and the view, it’s fixed.
• Heavier than a static image: Adds third‑party requests.

When to avoid the JS API: If you just need a pin, stick to the iframe. The JavaScript API is powerful but adds complexity, requires an API key, and can incur costs at scale. Only reach for it if you need custom controls, dynamic markers, or data overlays. See Google’s docs: Share or embed a map and the Maps JavaScript API. For deeper Google specifics, see our Google Maps embed guide and options to show Google Maps.

OpenStreetMap and Leaflet

OpenStreetMap (OSM) is community‑owned, open data. The fastest way to an OpenStreetMap embed is the built‑in share/iframe.

Steps:

1. Go to openstreetmap.org, search your location.
2. Click the Share icon.
3. Pick HTML, adjust the area, copy the iframe.
4. Paste into your site.

Pattern you’ll see:

<div class="map-wrap">
  <iframe
    src="https://www.openstreetmap.org/export/embed.html?bbox=BBOX&layer=mapnik&marker=LAT,LON"
    loading="lazy"
  ></iframe>
</div>

Why choose OSM:

• Cost control: The iframe is free; no quotas like commercial APIs.
• Attribution-friendly: You must keep the credit visible.
• Neutral look: Less opinionated branding than Google.

When to use Leaflet: If you need more control (custom markers, layers, interactivity), Leaflet is a popular open‑source library that displays OSM or other tiles. It requires front‑end JavaScript and a tile source, but you gain fine‑grained control without vendor lock‑in. Start with the Leaflet quick start and review OSM’s tile usage policy if you plan significant traffic; for scale, consider a managed tile provider.

ArcGIS, Mapbox, and other providers

Sometimes you need specialized layers, branded cartography, or enterprise features.

• ArcGIS Online (Esri): From a web map’s Share dialog, choose Embed in Website to get a responsive iframe like:

  <div class="map-wrap">
    <iframe
      src="https://www.arcgis.com/apps/Embed/index.html?webmap=WEBMAP_ID&zoom=true&scale=true"
      loading="lazy"
    ></iframe>
  </div>
  

  Useful for government, utilities, and organizations that rely on Esri services. See Esri’s Embed a map docs.

• Mapbox: In Mapbox Studio, open your style → Share → use the embed option to get an iframe URL for your style. Ideal when you want design control (custom colors, fonts, labels) with robust performance. Review Mapbox’s share and embed guidance.

• Others (Bing, CARTO, HERE): Most provide a copy‑paste embed with options for controls and layers. The pattern is the same: get an iframe, make it responsive, and ensure attribution remains visible.

Key settings to check:

• Zoom and scroll behavior: Enable/disable scroll‑wheel zoom depending on your layout.
• Controls: Show only what’s necessary (zoom, fullscreen, search).
• Attribution and logos: Required; don’t cover or remove them.

Responsive patterns

A map that overflows on mobile is a support ticket waiting to happen. Use one reusable pattern that scales everywhere.

CSS (single pattern):

.map-wrap {
  width: min(100%, 900px);
  margin-inline: auto;
  aspect-ratio: 16 / 9; /* Adjust to 3/2 or 4/3 if your layout prefers */
}
.map-wrap > iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

HTML:

<div class="map-wrap">
  <iframe src="PROVIDER_IFRAME_URL" loading="lazy" allowfullscreen></iframe>
</div>

Tips:

• Aspect ratio: Start with 16:9; switch to 3:2 for taller views. The CSS aspect-ratio property is widely supported.
• Width constraints: Use max‑width so maps don’t sprawl on desktops.
• Performance: Add loading=“lazy” to defer off‑screen maps.
• Block editors/CMS: In WordPress, Squarespace, Shopify, or Wix, drop your iframe in a custom HTML block and add the CSS in your site styles or theme customizer.

Privacy and compliance

Embedding loads third‑party content. Be intentional about data and terms.

• Consent patterns:
  • Show a placeholder image and load the map on click.
  • If you already ask for consent, delay the map until the user accepts.
• Minimal data approach: An iframe avoids API keys and lowers surface area compared to full JS SDKs.
• Attribution and terms:
  • OpenStreetMap: Keep © OpenStreetMap contributors visible; see the attribution guidelines.
  • Google: Follow the Maps Platform Terms and keep logos/attribution intact.
  • Mapbox: Review Mapbox attribution requirements.
  • ArcGIS: Check Esri’s terms of use and your license.

If you’re unsure, default to the provider’s iframe, keep their credit visible, and don’t obscure it with overlays.

Which should you choose?

Pick based on audience expectations, customization needs, and budget.

Rules of thumb:

• Default to the simplest thing: If all you need is a pin, use a map iframe.
• Move up only for a reason: Custom overlays, analytics, or data‑driven layers justify JS‑based solutions.
• Be consistent sitewide: Use the same provider and responsive pattern across pages so users aren’t relearning controls.

And when you’re ready to roll the same map across templates—contact, store pages, footer—MicroEdits makes it feel effortless: describe it once and apply everywhere.