How to Use Google Maps API Free in 2026

Want to add Google Maps to your website without paying a fortune? Google applies free monthly usage by SKU. For a typical store locator, Dynamic Maps, Geocoding, and Autocomplete Requests each include 10,000 monthly billable events, counted separately. That's enough for most small to medium websites.

Setting up Google Maps API involves billing accounts, API keys, quotas, and JavaScript code. By the end of this guide, you will know how to configure it.

Related: What is geocoding? | Google Maps vs Mapbox

#Understanding Google Maps API Pricing in 2026

Before we dive into the technical setup, let's talk money. Google's pricing can be confusing, so here's the breakdown:

#SKU-Specific Free Monthly Usage (Since March 2025)

In March 2025, Google replaced the old flat $200 monthly credit with free monthly usage for each SKU. Most Essentials SKUs include 10,000 free monthly billable events, but allowances vary by SKU. For a typical store locator:

• Dynamic Maps (JavaScript API): 10,000 free loads/month, then $7 per 1,000
• Static Maps: 10,000 free requests/month, then $2 per 1,000
• Geocoding (address to coordinates): 10,000 free requests/month, then $5 per 1,000
• Autocomplete Requests: 10,000 free requests/month, then $2.83 per 1,000

Each SKU's free monthly allowance is independent. Using 10,000 Dynamic Maps loads doesn't affect your Geocoding allowance.

#When You'll Start Paying

You exceed the free tier when:

• A SKU exceeds its own monthly free allowance
• High-traffic pages push Dynamic Maps loads past 10,000 in a month
• Autocomplete Requests exceed 10,000 monthly requests; terminating Place Details calls are billed separately

The catch? You must still set up billing. Google requires a billing-enabled project with a valid payment method even when usage stays within the free allowance. If you go over, charges apply automatically.

#Step-by-Step: Setting Up Google Maps API

Ready to wade through Google's setup process? Here we go.

#Step 1: Create a Google Cloud Account

1. Navigate to Google Cloud Console
2. Sign in with your Google account (or create one)
3. Accept the terms of service
4. You'll land on the Cloud Console dashboard

#Step 2: Create a New Project

1. Click the project dropdown at the top of the page
2. Click New Project
3. Enter a project name (e.g., "My Store Locator")
4. Select your organization (if applicable)
5. Click Create
6. Wait for the project to be created (this can take 30-60 seconds)

#Step 3: Enable Billing (Required!)

This is the part most tutorials skip, and it's why your API key won't work.

1. Navigate to Billing in the left sidebar
2. Click Link a billing account
3. If you don't have a billing account:
   • Click Create billing account
   • Enter your country and accept terms
   • Choose account type (Individual or Business)
   • Add a supported payment method
   • Complete verification

Important: You won't be charged until you exceed the free tier limits, but you MUST complete this step for the API to work.

#Step 4: Enable the Maps JavaScript API

1. Go to APIs & Services > Library
2. Search for "Maps JavaScript API"
3. Click on it and press Enable
4. Also enable these related APIs if needed:
   • Geocoding API (for address search)
   • Places API (for autocomplete)
   • Directions API (for routing)

#Step 5: Create Your API Key

1. Go to APIs & Services > Credentials
2. Click Create Credentials > API Key
3. Your API key appears in a popup, copy it somewhere safe
4. Click Restrict Key (critical for security!)

#Step 6: Restrict Your API Key (Don't Skip This!)

An unrestricted API key is a security nightmare. Anyone who finds it can rack up charges on your account.

Application restrictions:

1. Select HTTP referrers (websites)
2. Add your website domains:

    1https://yourwebsite.com/*
    2https://www.yourwebsite.com/*
    3http://localhost:*  (for development)
   

API restrictions:

1. Select Restrict key

2. Check only the APIs you're using:

   • Maps JavaScript API
   • Geocoding API
   • Places API

3. Click Save

#Step 7: Add the Map to Your Website

Now for the actual code. Here's a basic implementation:

 1<!DOCTYPE html>
 2<html>
 3<head>
 4  <title>Store Locator</title>
 5  <style>
 6    #map {
 7      height: 500px;
 8      width: 100%;
 9    }
10  </style>
11</head>
12<body>
13  <div id="map"></div>
14
15  <script>
16    function initMap() {
17      // Create the map centered on your location
18      const map = new google.maps.Map(document.getElementById('map'), {
19        center: { lat: 40.7128, lng: -74.0060 }, // New York
20        zoom: 12
21      });
22
23      // Add a marker
24      const marker = new google.maps.Marker({
25        position: { lat: 40.7128, lng: -74.0060 },
26        map: map,
27        title: 'Our Store'
28      });
29    }
30  </script>
31
32  <script async defer
33    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
34  </script>
35</body>
36</html>

Replace YOUR_API_KEY with your actual API key.

#Building a Basic Store Locator (The Hard Way)

Want a functional store locator? You'll need to add:

#Search Functionality

 1function searchLocations(address) {
 2  const geocoder = new google.maps.Geocoder();
 3
 4  geocoder.geocode({ address: address }, (results, status) => {
 5    if (status === 'OK') {
 6      const location = results[0].geometry.location;
 7      map.setCenter(location);
 8
 9      // Find nearby stores from your database
10      findNearbyStores(location.lat(), location.lng());
11    } else {
12      alert('Could not find that address');
13    }
14  });
15}

#Store Data Management

You'll need a database or JSON file with your locations:

 1const stores = [
 2  {
 3    name: "Downtown Store",
 4    lat: 40.7128,
 5    lng: -74.0060,
 6    address: "123 Main St, New York, NY",
 7    phone: "(555) 123-4567"
 8  },
 9  // ... hundreds more entries
10];

#Distance Calculation

 1function calculateDistance(lat1, lon1, lat2, lon2) {
 2  const R = 3959; // Earth's radius in miles
 3  const dLat = (lat2 - lat1) * Math.PI / 180;
 4  const dLon = (lon2 - lon1) * Math.PI / 180;
 5  const a =
 6    Math.sin(dLat/2) * Math.sin(dLat/2) +
 7    Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
 8    Math.sin(dLon/2) * Math.sin(dLon/2);
 9  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
10  return R * c;
11}

#Info Windows

 1stores.forEach(store => {
 2  const marker = new google.maps.Marker({
 3    position: { lat: store.lat, lng: store.lng },
 4    map: map
 5  });
 6
 7  const infoWindow = new google.maps.InfoWindow({
 8    content: `
 9      <h3>${store.name}</h3>
10      <p>${store.address}</p>
11      <p>${store.phone}</p>
12    `
13  });
14
15  marker.addListener('click', () => {
16    infoWindow.open(map, marker);
17  });
18});

#Common Gotchas and Problems

After all that setup, here's what typically goes wrong:

#"This page can't load Google Maps correctly"

Causes:

• Billing not enabled (most common)
• API key restrictions too strict
• Wrong API not enabled
• Exceeded quotas

Fix: Check the browser console for specific error messages, then verify your Cloud Console settings.

#"Google Maps JavaScript API error: RefererNotAllowedMapError"

Your domain isn't in the allowed referrer list. Add it to your API key restrictions, including both www and non-www versions.

#Map loads but markers don't appear

Check that your latitude/longitude values are numbers, not strings:

 1// Wrong
 2{ lat: "40.7128", lng: "-74.0060" }
 3
 4// Right
 5{ lat: 40.7128, lng: -74.0060 }

#Billing alerts and unexpected charges

Set up budget alerts in Google Cloud Console:

1. Go to Billing > Budgets & alerts
2. Create a budget based on your expected usage
3. Set alert thresholds at 50%, 90%, and 100%

#Frequently Asked Questions

#Is Google Maps API really free?

Free monthly usage is set per SKU. Dynamic Maps, for example, includes 10,000 free monthly map loads. You must enable billing, but you won't be charged unless you exceed the applicable allowance.

#Can I use Google Maps without an API key?

No. Since 2018, Google requires an API key for all Maps JavaScript API usage. Keyless access no longer works.

#What happens if I exceed the free tier?

Google charges the billing account's payment method automatically. Set up budget alerts to avoid surprises.

#How do I know if I'll exceed the free tier?

Monitor usage in Google Cloud Console under APIs & Services > Dashboard. Each Dynamic Maps load is a billable event, and the SKU includes 10,000 free monthly loads.

#Can I use Google Maps on multiple websites?

Yes, but each domain needs to be added to your API key's allowed referrers. All usage counts against your free tier limits for each API.

#Ready to Skip the Complexity?

Building a store locator from scratch is a significant undertaking. If you have the development resources and want complete control, the Google Maps API is powerful and flexible.

But if you want to help customers find your stores today, without writing code or building the integration yourself, try StoreRocket free for 7 days. No credit card required.

Need help choosing between building custom or using a hosted solution? Contact our team, we're happy to help you decide what's best for your business.