Google Maps API: How to Get an API Key, Set Up Billing and Add a Map

To use the Google Maps API, create a project in the Google Cloud console, attach a billing account, enable the Maps JavaScript API (or whichever Google Maps Platform API you need), and create an API key restricted to your website. Since March 2025, each API has its own free monthly allowance instead of the old $200 credit. For a website map, the first 10,000 map loads per month are free. To test without a credit card, Google now offers a Maps Demo Key that needs no billing.

This guide covers the current setup in the Google Cloud console, how pricing works, a minimal map you can paste into an HTML file, and free alternatives if Google Maps doesn't fit.

Google Maps Platform APIs at a glance

"Google Maps API" is really a family of APIs under Google Maps Platform. The ones developers use most:

API	What it does	Typical use
Maps JavaScript API	Interactive maps in web pages	Store locator, map on a contact page
Maps Embed API	An iframe map with no JavaScript	Simple "find us" map
Maps SDK for Android / iOS	Native maps in mobile apps	Delivery or travel apps
Geocoding API	Address to coordinates and back	Saving a user's address as lat/lng
Places API (New)	Place search, details, autocomplete	Address autocomplete in a form
Routes API	Directions, travel times, distance matrices	ETA, route planning

Every API is enabled per project and billed per SKU. You can use one API key for several of them, restricted to only the APIs you enabled.

How to get a Google Maps API key (step by step)

1. Sign in to the Google Cloud console and create a project (or pick an existing one). If you open the Google Maps Platform getting-started page, it walks you through the same steps.
2. Set up billing. A standard API key requires a project with a billing account attached (setup docs). You enter a payment card, but with the free monthly caps a small site often pays nothing.
3. Enable the API. In Google Maps Platform, open APIs & Services, find Maps JavaScript API and click Enable. Enable Geocoding, Places or others only if you need them.
4. Create the key. On the Google Maps Platform Credentials page, choose Create credentials > API key. Copy it.
5. Restrict the key (do not skip this, because a browser key is visible to anyone who views your page source). Following Google's security guide:
   • Under Application restrictions, choose Websites and add your origins, for example https://example.com and https://*.example.com. Add http://localhost:3000 (or your dev port) for local work, ideally on a separate dev key.
   • Under API restrictions, choose Restrict key and select only the APIs this key should call, such as Maps JavaScript API.
   • Click Save. Changes can take a few minutes to apply.
6. Protect your budget. In Cloud Billing, set a budget alert. In the API's Quotas page, lower the daily request cap so a leaked key or a bug can't run up a large bill.

For server-side APIs (Geocoding, Routes called from your backend), create a separate key restricted by IP address and keep it out of client code.

Testing without billing: the Maps Demo Key

Google now offers a Maps Demo Key for prototyping. You sign in, accept the terms, and get a key with no billing account or card. It has daily per-API limits (usage pauses until the next day instead of charging you), supports only a subset of features (maps, markers, info windows, styling, some Places UI), and production use is not allowed. To go live, add billing to it or create a normal key.

Google Maps API pricing in 2026

On March 1, 2025, Google replaced the $200 monthly credit with a free usage cap for each SKU. SKUs are grouped into Essentials, Pro and Enterprise tiers, and each SKU has its own free events per month. Above the cap you pay per 1,000 events, with volume discounts. Current numbers from the pricing page:

SKU	Tier	Free per month	Price after the free cap
Dynamic Maps (Maps JavaScript API map loads)	Essentials	10,000	$7.00 per 1,000, lower at high volume
Geocoding	Essentials	10,000	$5.00 per 1,000, lower at high volume
Maps Embed	Essentials	Unlimited	No charge
Maps SDK (mobile)	Essentials	Unlimited	No charge
Dynamic Street View	Pro	5,000	Per 1,000, see pricing page
Photorealistic 3D Tiles	Enterprise	1,000	Per 1,000, see pricing page

In the Maps JavaScript API, each map load counts as one Dynamic Maps event (usage and billing). Panning and zooming an already loaded map does not add loads. Prices change, so check the pricing page before you estimate costs. If you only need a static "find us" map, the Maps Embed API is free with no cap.

Add a Google map to a web page

This is a complete HTML file. Replace YOUR_API_KEY and open it from a URL your key allows (for example http://localhost:3000). It loads the API with the documented loading=async script tag (loading guide) and adds a marker with AdvancedMarkerElement. The legacy google.maps.Marker class is deprecated.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My first Google map</title>
    <style>
      #map { height: 400px; width: 100%; }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      async function initMap() {
        const { Map } = await google.maps.importLibrary("maps");
        const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

        const position = { lat: 40.7484, lng: -73.9857 };
        const map = new Map(document.getElementById("map"), {
          center: position,
          zoom: 15,
          mapId: "DEMO_MAP_ID", // Advanced Markers need a map ID; create your own for production
        });

        new AdvancedMarkerElement({ map, position, title: "Empire State Building" });
      }
    </script>
    <script
      async
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap"
    ></script>
  </body>
</html>

In a bundled app (React, Vue, Next.js), use Google's npm package @googlemaps/js-api-loader. Version 2 replaced the old Loader class with two functions, setOptions (to pass your key) and importLibrary:

import { setOptions, importLibrary } from "@googlemaps/js-api-loader";

setOptions({ key: import.meta.env.VITE_GOOGLE_MAPS_KEY, v: "weekly" });

const { Map } = await importLibrary("maps");
new Map(document.getElementById("map"), { center: { lat: 51.5, lng: -0.12 }, zoom: 12 });

Common setup errors

• "This page can't load Google Maps correctly" or ApiNotActivatedMapError: the Maps JavaScript API is not enabled for the key's project.
• RefererNotAllowedMapError: the page's URL isn't in the key's website restrictions. Add the exact origin, including the port for localhost.
• BillingNotEnabledMapError: the project has no active billing account.
• A darkened map with a "for development purposes only" watermark usually means a billing or key problem. Check the browser console for the exact error name.

Free alternatives to the Google Maps API

If you want to avoid billing setup entirely, or need more map loads than the free cap allows, open-source libraries are a solid choice:

Option	What it is	Notes
Leaflet + OpenStreetMap	Lightweight raster-tile map library	Easiest to start. The public OSM tile servers have a usage policy that rules out heavy traffic, so use a tile provider or host tiles for real apps.
MapLibre GL JS	Open-source vector map renderer (a fork of Mapbox GL JS v1)	Smooth vector maps and custom styles. Needs a vector tile source (self-hosted or a hosted provider).
Hosted providers (MapTiler, Stadia Maps, Mapbox and others)	Tiles, geocoding and routing as a service	Most have free tiers. Check limits and attribution rules.

A minimal Leaflet map:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<div id="map" style="height: 400px"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
  const map = L.map("map").setView([40.7484, -73.9857], 15);
  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 19,
    attribution: "&copy; OpenStreetMap contributors",
  }).addTo(map);
  L.marker([40.7484, -73.9857]).addTo(map);
</script>

For geocoding, routing and map tiles you can call without a credit card, see our list of free maps and geocoding APIs, or browse all free APIs. Some cloud providers also hand out credits through startup programs. See developer perks.

FAQ

Is the Google Maps API free?

Partly. Each SKU has a free monthly cap, such as 10,000 Dynamic Maps loads and 10,000 Geocoding requests. The Maps Embed API and the mobile Maps SDKs have no charge. Above the caps you pay per 1,000 events, and a standard key still needs a billing account.

Can I get a Google Maps API key without billing?

Yes, for testing only. The Maps Demo Key works without a billing account or card, has daily limits and a reduced feature set, and is not allowed in production. For a live site, attach billing to the project.

Where is the Google Maps API console?

It is part of the Google Cloud console. Go to console.cloud.google.com/google/maps-apis to enable APIs, and to the Credentials page to create and restrict keys.

Is it safe to put a Google Maps API key in front-end code?

A browser key will always be visible, so its safety comes from restrictions. Limit it to your website origins and to the specific APIs it needs, and set quotas and budget alerts. Use a separate IP-restricted key for server calls.

Where are the Google Maps API docs?

The main documentation is at developers.google.com/maps. The Maps JavaScript API docs cover web maps, and each other API (Geocoding, Places, Routes) has its own section there.