Show Google Maps on a Website with the JS API

Overview

Sometimes you just need a map. Other times, you need a map you can control: dynamic pins, programmatic zoom, user interaction, and room to grow. That’s when the Google Maps JavaScript API shines. If your goal is simply to display a non‑interactive map, use an iframe instead—our simple, copy‑paste approach is in the iframe‑based embed guide.

This tutorial shows the minimal path to show Google Maps on website pages with the Google Maps JavaScript API: get a key, set referrer restrictions, paste a compact snippet, and add markers. You’ll also see how to avoid the common pitfalls (like a RefererNotAllowedMapError) and squeeze performance.

If you’re a no‑code editor who just wants the result without digging through themes, you can also add a dynamic map using MicroEdits—no build pipeline, no deployments. For a broader walkthrough, see our step‑by‑step article, add a Google Map to your website.

Add dynamic maps instantly with MicroEdits

Editing a live site shouldn’t require a local setup or a developer on speed dial. MicroEdits lets you describe the change you want—Add a Google Map to the Contact page, center on our office, zoom 14—and it handles the rest. It works on your existing website (WordPress, Shopify, Webflow, custom, anything), applies changes instantly, and lets you preview and share before you commit. No coding. No plugins. No chasing the right template file.

• Edit any page by URL.
• Ask for what you want in plain English.
• Preview changes safely across pages, then apply or revert in seconds.

To get started, simply enter your website URL and start editing. It feels like magic because, for you, it is.

API key and billing setup

Before you display Google Map on website pages via the JavaScript API, set up a key and restrictions. This step is where most errors come from—do it early.

1. Create a key and enable the API

• Go to the official Maps JavaScript API overview and follow the Get an API key flow.
• Enable the “Maps JavaScript API” for your project. Billing must be enabled to load the API.

2. Add HTTP referrer restrictions

• In Google Cloud Console, edit your key and add HTTP referrers (e.g., example.com and www.example.com). Avoid wildcards that are too broad.
• See official guidance on API key restrictions.

3. Verify quotas

• Default quotas are usually enough for small sites. If you expect heavy traffic, review usage and set alerts.

Tip: Keep your key out of public repos. Use restrictions so the key is only valid from your domains.

Minimal implementation

Here’s a compact, copy‑paste example to show Google Maps on website pages without extra dependencies. Replace YOUR_API_KEY and coordinates as needed.

1. Add a map container (the map must have a height):

<!-- Place this where you want the map to appear -->
<div
  id="map"
  style="height: 380px; width: 100%;"
  aria-label="Location map"
></div>

2. Load the API and initialize the map:

// Replace with your coordinates
const MAP_CENTER = { lat: 40.7128, lng: -74.006 }; // New York City

// The Maps API calls this function after it loads
window.initMap = function () {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: MAP_CENTER,
    zoom: 12,
    mapTypeControl: false,
    streetViewControl: false,
  });
};

// Dynamically load the Google Maps JavaScript API
(function loadGoogleMaps() {
  const s = document.createElement("script");
  s.src =
    "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly";
  s.async = true;
  s.defer = true;
  document.head.appendChild(s);
})();

That’s enough to display a map. If you see errors, jump to Troubleshooting below.

Accessibility nudge: Give nearby context like an address and a text link to directions. Don’t force keyboard focus into the map—let users choose.

Markers and info windows

Start with one marker and a simple info window. It’s the most readable way to place a pin and explain where it is.

window.initMap = function () {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 51.5074, lng: -0.1278 }, // London
    zoom: 13,
  });

  // Single marker
  const marker = new google.maps.Marker({
    position: { lat: 51.5074, lng: -0.1278 },
    map,
    title: "Our London Office",
    // Optional custom icon:
    // icon: 'https://example.com/path/to/icon.png'
  });

  // Basic info window
  const info = new google.maps.InfoWindow({
    content: "<strong>Our London Office</strong><br>10 Downing St, London",
  });

  marker.addListener("click", () => info.open({ anchor: marker, map }));
};

Multiple locations? Consider clustering to keep the map responsive and readable. See Google’s guide to marker clustering. For large datasets, load marker data from a lightweight JSON feed and render only what’s in view.

Performance considerations

• Defer and conditionally load: Only load the API when the map is near the viewport or after a user action (e.g., Show map button). Your loader can be wrapped in an IntersectionObserver.
• Keep libraries lean: Load only what you need. The minimal example above omits extra libraries to reduce payload.
• Cluster markers: Clustering cuts DOM work and speeds up interaction when you have many locations.
• Reduce reflows: Set a fixed map container height in CSS to prevent layout shifts.
• Mobile first: A 320–400px tall map works well on phones; place text directions above/below.
• Accessibility: Provide a text address and a Get directions link. Avoid trapping focus inside the map controls.

Troubleshooting

Common issues you’ll see when you display Google Map on website pages and how to fix them.

For official error references, see Google’s JavaScript API error messages.

Prefer a simple embed?

If you don’t need programmatic control, an iframe is faster to set up and impossible to misconfigure. Follow our no‑code guide to embed a Google Map with an iframe. If you’re comparing options, this primer on ways to embed a map on a website will help you pick the right approach.

—

With this minimal, performant setup, you can show Google Maps on website pages, add polished markers, and keep load time in check. If you want to skip the plumbing altogether, MicroEdits can place the map for you—describe the change, preview it, and you’re done.