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 Google Maps API tutorial covers the current setup in the Google Cloud console, how pricing works as of November 2026, a minimal map you can paste into an HTML file, React and Next.js integration, Places, Routes and Geocoding calls with real requests, Advanced Markers and Map IDs, every common error and its fix, and free alternatives (with a sourced price comparison) 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. There is no single Google Maps developer API: you enable the specific products your app needs in one Cloud project, and one key can call several of them. The APIs Google Maps Platform developers use most:
| API | What it does | Typical use | Status (Nov 2026) |
|---|---|---|---|
| Maps JavaScript API | Interactive maps in web pages | Store locator, map on a contact page | Current |
| Maps Embed API | An iframe map with no JavaScript | Simple "find us" map | Current, free |
| Maps Static API | A map as a single image | Emails, thumbnails, PDFs | Current |
| Maps SDK for Android / iOS | Native maps in mobile apps | Delivery or travel apps | Current, map loads free |
| Geocoding API | Address to coordinates and back | Saving a user's address as lat/lng | Current |
| Places API (New) | Place search, details, autocomplete | Address autocomplete in a form | Current (replaces Places API) |
| Routes API | Directions, travel times, distance matrices | ETA, route planning | Current (replaces Directions and Distance Matrix) |
| Places API, Directions API, Distance Matrix API | The older versions of the above | Existing apps only | Legacy since March 1, 2025 |
Each API Google Maps Platform offers 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. In the console's API Library you'll find the Google APIs, Maps included, mixed with every other Google Cloud service, so search for the exact product name.
Which Google API for Google Maps do you need?
The right Google API, Maps JavaScript or a server-side web service, depends on what the user should see or what your server needs to know:
- Show a map you can pan and zoom on a website: Maps JavaScript API. This is the one most people mean by "Google Maps API".
- Show a map with zero code and zero cost: Maps Embed API (an
<iframe>). - Turn an address into coordinates: Geocoding API (server side) or the Geocoder class inside the Maps JavaScript API (browser).
- Let users type an address and pick from suggestions: Places API (New), through the Place Autocomplete widget.
- Search for businesses or points of interest: Places API (New) Text Search or Nearby Search.
- Driving time, distance or a route line: Routes API.
- Check that a postal address is real: Address Validation API.
How to get a Google Maps API key (step by step)
- Sign in to the Google Cloud console and create a project (or pick an existing one). Like any Google API, Google Maps Platform works per project: the project holds the billing account, the enabled APIs and the keys. If you open the Google Maps Platform getting-started page, it walks you through the same steps.
- 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. New Google Cloud customers also get a $300 trial credit.
- 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. Google notes you may have to wait a few minutes after enabling before requests succeed.
- Create the key. On the Google Maps Platform Credentials page, choose Create credentials > API key. Copy it.
- 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.comandhttps://*.example.com. Addhttp://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.
- Under Application restrictions, choose Websites and add your origins, for example
- 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.
The same steps from the command line
If you script your infrastructure, the gcloud CLI does steps 3 to 5. Google's setup docs give the service name for the Maps JavaScript API as maps-backend.googleapis.com:
# Enable the Maps JavaScript API in the current project
gcloud services enable maps-backend.googleapis.com
# Create a browser key limited to your site and to that one API
gcloud services api-keys create \
--display-name="Maps web key" \
--allowed-referrers="https://example.com/*,https://*.example.com/*" \
--api-target=service=maps-backend.googleapis.com
A Google Maps API key for a website vs. a server
Most projects end up with two or three keys. Keeping them separate means a leaked browser key can't be used for expensive server APIs, and you can rotate one without touching the others.
| Key | Application restriction | API restriction | Where it lives |
|---|---|---|---|
| Google map API key for website (production) | Websites: your domain(s) | Maps JavaScript API (plus Places if you use autocomplete) | Public page source, which is fine |
| Development key | Websites: http://localhost:* or your dev port |
Same as production | .env.local, never production |
| Server key | IP addresses of your servers | Geocoding API, Routes API, Places API (New) | Server environment variable or secret manager |
| Android / iOS key | Android apps (package + SHA-1) or iOS apps (bundle ID) | Maps SDK for Android / iOS | App build config |
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, and production use is not allowed. The Demo Key page lists Dynamic Maps, Places UI Kit, 3D Maps, Weather, Compute Routes, Autocomplete, Nearby Search, Text Search and Geocoding among the supported APIs. To go live, add billing to it or create a normal key.
This is the honest answer to "how do I get a Google Maps developer API key for free": the Demo Key is free and needs no card, and a standard key is free to create but needs billing attached, then costs nothing until you pass a SKU's free cap.
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. According to the Maps Platform pricing page, Essentials SKUs get 10,000 free calls per SKU per month, Pro SKUs 5,000 and Enterprise SKUs 1,000. That per-SKU allowance is the Google map API free tier: there is no other free plan. Above the cap you pay per 1,000 events, with volume discounts that now scale to 5,000,000+ monthly events. Current numbers from the pricing page, as of November 2026:
| SKU | Tier | Free per month | Price per 1,000 after the free cap (up to 100,000) |
|---|---|---|---|
| Dynamic Maps (Maps JavaScript API map loads) | Essentials | 10,000 | $7.00 |
| Static Maps | Essentials | 10,000 | $2.00 |
| Geocoding | Essentials | 10,000 | $5.00 |
| Autocomplete Requests (Places) | Essentials | 10,000 | $2.83 |
| Place Details Essentials | Essentials | 10,000 | $5.00 |
| Compute Routes Essentials | Essentials | 10,000 | $5.00 |
| Compute Route Matrix Essentials | Essentials | 10,000 | $5.00 |
| Maps Embed | Essentials | Unlimited | No charge |
| Maps SDK (mobile) | Essentials | Unlimited | No charge |
| 2D Map Tiles (Map Tiles API) | Essentials | 100,000 | $0.60 (up to 1,000,000) |
| Dynamic Street View | Pro | 5,000 | $14.00 |
| Place Details Pro | Pro | 5,000 | $17.00 |
| Text Search Pro / Nearby Search Pro | Pro | 5,000 | $32.00 |
| Compute Routes Pro | Pro | 5,000 | $10.00 |
| Address Validation Pro | Pro | 5,000 | $17.00 |
| Place Details Enterprise | Enterprise | 1,000 | $20.00 |
| Photorealistic 3D Tiles | Enterprise | 1,000 | $6.00 |
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.
Volume discounts
The discounts apply automatically for customers without a negotiated contract. For the two SKUs most sites hit first:
| Monthly events | Dynamic Maps (per 1,000) | Geocoding (per 1,000) |
|---|---|---|
| 0 to 10,000 | Free | Free |
| 10,001 to 100,000 | $7.00 | $5.00 |
| 100,001 to 500,000 | $5.60 | $4.00 |
| 500,001 to 1,000,000 | $4.20 | $3.00 |
| 1,000,001 to 5,000,000 | $2.10 | $1.50 |
| 5,000,000+ | $0.53 | $0.38 |
Source: pricing page. Google's own example: 2,000,000 Geocoding requests a month dropped from $7,900 to $5,050 under the new bands (March 2025 changes).
What a real bill looks like
Worked out from the pay-as-you-go prices above:
- A blog with a contact-page map and 8,000 page views a month: 8,000 Dynamic Maps loads, inside the 10,000 free. $0.
- A store locator with 50,000 map loads and 20,000 autocomplete requests: Dynamic Maps: 40,000 billable x $7.00/1,000 = $280. Autocomplete Requests: 10,000 billable x $2.83/1,000 = $28.30. About $308 a month.
- A SaaS dashboard with 150,000 map loads: 90,000 x $7.00/1,000 = $630, plus 50,000 x $5.60/1,000 = $280. About $910 a month.
That middle number is the point where most teams start looking at subscriptions or alternatives.
Subscription plans
Google also sells fixed monthly plans ("Subscribe to save" on mapsplatform.google.com/pricing) as an alternative to pay-as-you-go:
| Plan | Price per month | Calls per month | Covers |
|---|---|---|---|
| Starter | $100 | 50,000 | Dynamic Maps and Geocoding |
| Essentials | $275 | 100,000 | Maps, Routes, Places and Environment Essentials SKUs (Dynamic Maps, Geocoding, Autocomplete, Place Details Essentials, Compute Routes Essentials and more) |
| Pro | $1,200 | 250,000 | Adds Pro SKUs such as Text Search Pro, Nearby Search Pro, Place Details Pro, Compute Routes Pro, Address Validation Pro |
If your usage is steady and lands in that 50,000 to 250,000 range, a plan can be cheaper than the pay-as-you-go math above. Read the plan terms for how overage works before you switch.
How field masks decide your Places and Routes bill
Places API (New) and Routes API charge by which fields you ask for. Every request sends an X-Goog-FieldMask header, and the Places docs state the rule: if you select fields in both the Essentials and the Pro SKUs, you are billed at the Pro SKU. For Text Search, asking only for places.id is the Essentials (IDs Only) SKU, which is unlimited and free; adding places.displayName or places.formattedAddress makes it Pro ($32.00 per 1,000 after 5,000 free); adding places.rating or places.websiteUri makes it Enterprise (Text Search docs).
Routes work the same way by feature: Compute Routes Essentials covers basic requests with up to 10 intermediate waypoints, while TRAFFIC_AWARE or TRAFFIC_AWARE_OPTIMAL routing bills as Pro, and two-wheel or large-vehicle routing bills as Enterprise (Routes billing).
Pricing timeline
- Feb 21, 2024
google.maps.Markerdeprecated in Maps JavaScript API v3.56;AdvancedMarkerElementis the replacement (migration guide). - Mar 1, 2025$200 monthly credit replaced by per-SKU free caps; Essentials, Pro and Enterprise tiers; Places API, Directions API and Distance Matrix API become legacy (details).
- Jul 8, 2025Separate Google Maps Platform EEA Terms of Service take effect for billing addresses in the European Economic Area (Geocoding overview).
- Sep 1, 2025Negotiated contracts up for renewal move to the expanded automatic volume discounts.
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>
The #map element must have a height. A map that loads with no errors but shows nothing is almost always a div with zero height.
In a bundled app (React, Vue, Next.js), use Google's npm package @googlemaps/js-api-loader (version 2.1.3 as of November 2026). 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 });
For TypeScript, install @types/google.maps so the google.maps namespace is typed.
Advanced Markers and custom pins
AdvancedMarkerElement replaced google.maps.Marker, which Google deprecated on February 21, 2024 in v3.56 (migration guide). Two rules from that guide: a map ID is required for advanced markers, and the marker library is loaded with importLibrary("marker"). DEMO_MAP_ID works for testing. To change the pin's colors, or use any HTML as the marker:
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
// Recolored default pin
const pin = new PinElement({ background: "#f97316", borderColor: "#9a3412", glyphColor: "#ffffff" });
new AdvancedMarkerElement({ map, position: { lat: 40.7484, lng: -73.9857 }, content: pin.element });
// Any DOM node as a marker
const badge = document.createElement("div");
badge.textContent = "HQ";
badge.style.cssText = "background:#111;color:#fff;padding:4px 8px;border-radius:6px;font:600 12px sans-serif";
new AdvancedMarkerElement({ map, position: { lat: 40.758, lng: -73.9855 }, content: badge });
Map IDs and cloud-based map styling
A map ID is "a unique identifier that represents Google Map styling and configuration settings" stored in your Cloud project. You create it on the Map Management page of the Google Maps Platform console, per platform (JavaScript, Android, iOS or Static). A JavaScript vector map ID renders tiles client side with WebGL, which unlocks tilt, rotation and other WebGL features.
With cloud-based maps styling, you design a style in the console (colors, which points of interest show, road density), attach it to the map ID, and pass mapId in your code. Change the style in the console later and every site and app using that ID updates without a deploy. This replaces the old pattern of pasting a long styles JSON array into your map options. On Android and iOS, Google notes that using a map ID triggers a charged map load against the Dynamic Maps SKU.
Showing your own data on the map
There is no separate Google Maps Data API today. To draw your own data on a Google Maps API map, use the Data layer that every map has: map.data.loadGeoJson("/stores.geojson") draws points, lines and polygons from a GeoJSON file, and map.data.setStyle() colors them. For thousands of points, cluster markers with Google's @googlemaps/markerclusterer package rather than adding every marker individually.
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.
The full list from Google's error messages reference, with the fix for each:
| Console error | What it means | Fix |
|---|---|---|
ApiNotActivatedMapError |
Maps JavaScript API isn't enabled for the project | APIs & Services > enable Maps JavaScript API |
RefererNotAllowedMapError |
The page URL isn't in the key's allowed referrers | Add the origin (with port for localhost) under Website restrictions |
BillingNotEnabledMapError |
No billing on the project | Link a billing account, or use a Demo Key for testing |
InvalidKeyMapError |
The key in the script tag can't be found | Copy the key again, or create a new one |
MissingKeyMapError |
The script tag has no key parameter |
Add key=YOUR_API_KEY to the script URL |
ExpiredKeyMapError |
Key expired or not recognized yet | Common right after creating a key: wait a few minutes and retry |
ApiProjectMapError |
Key or its project couldn't be resolved | Often temporary; if it persists, create a new key or project |
OverQuotaMapError |
Usage limit exceeded | Raise the quota cap, or wait for the daily reset |
InvalidVersion (warning) |
The v= version in the script URL is wrong |
Use weekly, quarterly or a valid version number |
For web service calls (Geocoding, Places, Routes), errors come back in the response instead. The Geocoding API, for example, returns status: "REQUEST_DENIED" for a key or API-enablement problem, and OVER_DAILY_LIMIT for a missing or invalid key, billing not enabled, a self-imposed usage cap or an invalid payment method (geocoding requests reference).
Google map integration in React and Next.js
For React, use @vis.gl/react-google-maps (version 1.10.2 as of November 2026), a component library for the Maps JavaScript API. It wraps the API in components and handles loading the script once.
npm install @vis.gl/react-google-maps
import { APIProvider, Map, AdvancedMarker, Pin } from "@vis.gl/react-google-maps";
const position = { lat: 40.7484, lng: -73.9857 };
export default function StoreMap() {
return (
<APIProvider apiKey={import.meta.env.VITE_GOOGLE_MAPS_KEY}>
<Map
style={{ width: "100%", height: 400 }}
defaultCenter={position}
defaultZoom={15}
mapId="DEMO_MAP_ID"
gestureHandling="greedy"
>
<AdvancedMarker position={position}>
<Pin background="#0f9d58" borderColor="#006425" glyphColor="#60d98f" />
</AdvancedMarker>
</Map>
</APIProvider>
);
}
Per the AdvancedMarker docs, AdvancedMarker only works on maps with a mapId. Use defaultCenter and defaultZoom (uncontrolled) unless you need to drive the camera from state; controlled center/zoom props require you to handle camera change events yourself.
In Next.js (App Router): the map component must be a client component, so put "use client" at the top of the file, and read the key from process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY (only NEXT_PUBLIC_ variables reach the browser). That key is public by design, so its website restriction is what protects it. Keep the server key in a non-public variable used only in route handlers or server actions. For a longer walkthrough of a React map with markers and info windows, see our guide to integrating maps into a React app with the Google Maps API.
Places API (New): autocomplete and place search
Places API (New) is the current version of Places. It has two faces: widgets inside the Maps JavaScript API, and a REST web service at places.googleapis.com.
Address autocomplete on a form
The Place Autocomplete widget is a web component. You create it, add it to the page, and listen for gmp-select:
const { PlaceAutocompleteElement } = await google.maps.importLibrary("places");
const placeAutocomplete = new PlaceAutocompleteElement();
document.getElementById("address-field").appendChild(placeAutocomplete);
placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => {
const place = placePrediction.toPlace();
await place.fetchFields({ fields: ["displayName", "formattedAddress", "location"] });
console.log(place.toJSON());
});
Ask fetchFields only for what you store. Autocomplete groups keystrokes into a session that ends with the Place Details call; abandoned sessions are billed as individual Autocomplete Requests (Places billing). The pricing page lists Autocomplete Session Usage as unlimited and free, and Autocomplete Requests at 10,000 free then $2.83 per 1,000.
Text Search from your server
This is Google's own example from the Text Search docs. It is a POST with the key and the field mask in headers. There is no default field list: leave out the field mask and you get an error, and spaces are not allowed in it.
curl -X POST -d '{
"textQuery" : "Spicy Vegetarian Food in Sydney, Australia"
}' \
-H 'Content-Type: application/json' -H 'X-Goog-Api-Key: API_KEY' \
-H 'X-Goog-FieldMask: places.displayName,places.formattedAddress' \
'https://places.googleapis.com/v1/places:searchText'
That mask (display name plus address) bills as Text Search Pro. If you only need place IDs to look up later, use places.id and the request is free. You can paste commands like this into our curl converter to get the same request as fetch, Python or Go.
Routes API: directions, ETA and distance
The Routes API replaces the legacy Directions API and Distance Matrix API. computeRoutes returns one route (plus alternatives if requested); computeRouteMatrix returns travel time and distance for many origins and destinations at once. Google's example:
curl -X POST -d '{
"origin": {"location": {"latLng": {"latitude": 37.419734, "longitude": -122.0827784}}},
"destination": {"location": {"latLng": {"latitude": 37.417670, "longitude": -122.079595}}},
"travelMode": "DRIVE",
"routingPreference": "TRAFFIC_AWARE",
"computeAlternativeRoutes": false,
"routeModifiers": {"avoidTolls": false, "avoidHighways": false, "avoidFerries": false},
"languageCode": "en-US",
"units": "METRIC"
}' \
-H 'Content-Type: application/json' -H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: routes.duration,routes.distanceMeters,routes.polyline.encodedPolyline' \
'https://routes.googleapis.com/directions/v2:computeRoutes'
Because it uses "routingPreference": "TRAFFIC_AWARE", this request bills as Compute Routes Pro (5,000 free, then $10.00 per 1,000). Drop the routing preference for a basic route and it bills as Essentials (10,000 free, then $5.00 per 1,000). The encodedPolyline can be decoded and drawn on a map as a Polyline.
Google Maps Geocoding API: addresses to coordinates
The Geocoding API is the simplest Maps web service: one GET request, JSON back.
curl "https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=YOUR_API_KEY"
The response has a status field and a results array. Each result carries formatted_address, address_components, geometry.location (lat, lng), place_id, plus_code and types. The same call from Node 18+ (built-in fetch), using a server key:
const params = new URLSearchParams({
address: "1600 Amphitheatre Parkway, Mountain View, CA",
key: process.env.GOOGLE_MAPS_SERVER_KEY,
});
const res = await fetch("https://maps.googleapis.com/maps/api/geocode/json?" + params);
const data = await res.json();
if (data.status !== "OK") throw new Error("Geocoding failed: " + data.status);
const { lat, lng } = data.results[0].geometry.location;
console.log(lat, lng);
For reverse geocoding (coordinates to an address), pass latlng=40.7484,-73.9857 instead of address. Check status before reading results: ZERO_RESULTS means a valid request with no match, which you should treat as "not found", not as an error. To inspect a big JSON response, our JSON formatter or JSON to TypeScript tool helps.
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 (1.9.4 is the current stable release on npm) | 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. |
Pricing comparison: Google Maps vs. Mapbox vs. MapTiler
Free tiers are counted differently (Google counts map loads, Mapbox counts GL JS map loads, MapTiler counts sessions), so compare them for your own traffic. Published numbers as of November 2026:
| Provider | Free map usage per month | First paid price | Geocoding free tier |
|---|---|---|---|
| Google Maps Platform | 10,000 Dynamic Maps loads | $7.00 per 1,000 loads | 10,000 requests, then $5.00 per 1,000 (pricing) |
| Mapbox | 50,000 GL JS map loads | $5.00 per 1,000 loads (50,001 to 100,000) | 100,000 Temporary Geocoding requests, then $0.75 per 1,000 (pricing) |
| MapTiler Cloud | 5,000 sessions and 100,000 API requests (Free plan, aimed at testing and non-commercial use) | Flex plan $30/month for 25,000 sessions and 500,000 requests | Included in API requests (pricing) |
| Leaflet or MapLibre + self-hosted tiles | No limit from the library | Your server and bandwidth costs | Bring your own (for example a self-hosted Nominatim) |
MapTiler's Free plan counts 5,000 sessions instead of loads, so it is left out of this chart. Source: Google Maps Platform pricing and Mapbox pricing, November 2026
At 100,000 map loads a month, Google's pay-as-you-go bill is 90,000 x $7.00/1,000 = $630, and Mapbox's is 50,000 x $5.00/1,000 = $250, before any geocoding. Google's own Essentials subscription ($275 for 100,000 calls) narrows that gap. The data quality, Places database and Street View are what you pay Google for; if you only need a base map with a few pins, the alternatives are much cheaper.
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: "© 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. More developer API tools are listed in our API tools directory.
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 Google Maps API documentation is at developers.google.com/maps. The Maps JavaScript API docs are the Google Maps API developer guide for web maps, and each other API (Geocoding, Places, Routes) has its own section there. Google's official client libraries and samples are on GitHub.
How much does the Google Maps API cost per month?
Nothing until you pass a SKU's free cap. After that, Dynamic Maps is $7.00 per 1,000 loads and Geocoding $5.00 per 1,000, dropping with volume. A site with 50,000 map loads a month pays about $280 for maps alone on pay-as-you-go, or you can buy a fixed plan from $100 a month.
What happened to the $200 Google Maps credit?
It ended on March 1, 2025. Google replaced it with free usage caps per SKU: 10,000 a month for Essentials SKUs, 5,000 for Pro and 1,000 for Enterprise. Each SKU now has its own separate allowance, so using maps, geocoding and autocomplete together gives you three free caps instead of one shared credit.
Which Google API for Google Maps should I enable?
For a map on a website, enable only the Maps JavaScript API. Add Places API (New) for address autocomplete or place search, Geocoding API for address-to-coordinates on your server, and Routes API for directions and travel times. Avoid the legacy Places, Directions and Distance Matrix APIs on new projects.
Is there a Google Maps Data API?
Not as a separate product today. To show your own data, use the Data layer in the Maps JavaScript API (map.data.loadGeoJson() for GeoJSON). Map styling based on your data is configured through map IDs and cloud-based styling.
What does the Google Maps "for development purposes only" watermark mean?
The map is loading, but Google rejected the key or the project's billing. Open the browser console: it names the exact error, usually BillingNotEnabledMapError, InvalidKeyMapError or RefererNotAllowedMapError. Fix that and the watermark disappears.
Why does my Google Maps developer API key work locally but not in production?
The production domain isn't in the key's website restrictions. Add it under Application restrictions > Websites (both https://example.com and https://*.example.com if you use subdomains like www), save, and wait a few minutes.
Is Google Maps API better than Mapbox or Leaflet?
For place data, address autocomplete and Street View, Google is the strongest. For a custom-styled map at volume, Mapbox's 50,000 free loads and lower first paid rate are cheaper. For a free, open-source API for maps with no vendor, use Leaflet or MapLibre with a tile provider.