Google Maps API Key 2026: Create, Secure and Test It

BlogGuides
Google Maps API key setup for ecommerce websites in 2026

Google Maps API Key: How to Get, Configure and Use It in 2026

A Google Maps API key allows a website, application or compatible ecommerce integration to request services from Google Maps Platform. You may need one to display an interactive map, create a store locator, search for addresses or show nearby delivery points.

Create a Google Cloud project, enable the required Google Maps Platform API, generate and restrict the Google API key, test it in the intended website or integration, and monitor the resulting usage and costs.

Quick answer: Create or select a Google Cloud project, connect billing, enable the API required by your integration, generate an API key and restrict it to the correct website and services. Do not use an unrestricted key on a production store.

What Is a Google Maps API Key?

A Google Maps API key is a credential connected to a Google Cloud project. It identifies the project making a request and connects that request with the project’s enabled APIs, restrictions, usage and billing.

A standard production setup requires a billing-enabled Google Cloud project, the required API enabled in that project, and authenticated requests using an API key.

Common services include:

  • Maps JavaScript API for interactive maps displayed in a browser
  • Places API for place search, place details and address autocomplete
  • Geocoding API for converting an address into geographic coordinates
  • Routes API for route and travel calculations

Beginner note: An API key is not your Google account password. It is a credential created for a specific Cloud project and application.

What You Need Before Starting

Prepare the following:

  • A Google account
  • Permission to create or manage a Google Cloud project
  • Access to an active Cloud Billing account
  • The domain where the map will appear
  • The name of the API required by your website or integration

A Google Cloud project contains the APIs, credentials, permissions, quotas and billing settings used by the implementation. Some integrations require more than one API. Enable an additional service only when the exact website, module, or application uses it.

Create a Google Cloud project for a Google Maps API key

How to Create a Google Cloud Project

Step 1: Open the project selector

Sign in to the Google Cloud console and open the project selector near the top of the page.

Step 2: Create or select a project

Choose an existing project or select Create Project.

Enter a descriptive project name, such as:

Store Maps and Delivery Points

Choose the appropriate organisation or folder when those options are available, then select Create.

Create or select the intended Google Cloud project and confirm that billing is enabled before configuring Maps Platform services.

Step 3: Confirm the selected project

Make sure the intended project appears in the project selector before enabling an API or creating a credential.

A frequent setup mistake is enabling Maps JavaScript API in one project but creating the key in another.

How to Set Up Billing

A standard production Maps JavaScript API setup requires billing to be connected to the Cloud project.

Google also offers a Maps Demo Key that can be used for limited testing and prototyping without entering billing information. It is not designed for production use.

To connect billing:

  1. Open Billing in the Google Cloud console.
  2. Select or create a Cloud Billing account.
  3. Link the Maps project to that account.
  4. Confirm that billing is active.

Connecting billing does not mean every map load will result in a charge. Google Maps Platform provides monthly free usage for individual SKUs, followed by pay-as-you-go pricing when the applicable allowance is exceeded.

Create a budget alert

After billing is active:

  1. Open Billing.
  2. Select Budgets & alerts.
  3. Create a budget for the relevant billing account or project.
  4. Add spending thresholds.
  5. Confirm who should receive the notifications.

Important: A budget alert is a notification tool. It does not automatically stop API requests or create a guaranteed spending limit. Use restrictions, monitoring and carefully selected quotas as additional controls.

Enable billing for a Google Maps API key

How to Enable Maps JavaScript API

Creating the project does not automatically activate Maps JavaScript API.

  1. Confirm that the correct Cloud project is selected.
  2. Open the Google Maps Platform API Library.
  3. Search for Maps JavaScript API.
  4. Select the API.
  5. Click Enable.

If the page displays Manage instead of Enable, the API is already active in the selected project.

Enable only the services required by the implementation. A basic interactive map may use Maps JavaScript API, while address autocomplete or place information can require an additional Places service.

Enable Maps JavaScript API for a Google API key

How to Generate Your Google API Key

After enabling the required API:

  1. Open Google Maps Platform → Credentials.
  2. Select Create credentials.
  3. Choose API key.
  4. Copy the generated key temporarily.
  5. Open the newly created credential.
  6. Give it a descriptive name.
  7. Configure restrictions before using it on a live website.

In the current Google Cloud interface, open Google Maps Platform → Credentials → Create credentials → API key.

Use a name that identifies the purpose and environment, such as:

Production Pickup Point Map

Avoid generic names such as API Key 1, especially when the account contains several websites or integrations.

How to Restrict Your Google Maps API Key

An unrestricted key can potentially be copied and used outside your website. The billing-account owner may be responsible for charges caused by unauthorised usage of an unrestricted key.

Apply both an application restriction and an API restriction before using the key on a live store.

Add a website restriction

For a map displayed in a browser:

  1. Open the API key.
  2. Under Application restrictions, choose Websites.
  3. Add the website addresses permitted to use the key.
  4. Include the protocol and hostname.
  5. Add required subdomains.
  6. Save the changes.

Example authorised referrers:

https://example.com/*
https://www.example.com/*
https://*.example.com/*

Use website restrictions for a browser-based Maps JavaScript API implementation. Avoid relying unnecessarily on full-path referrers because browsers may remove the path from cross-origin referrer information.

Add API restrictions

  1. Under API restrictions, choose Restrict key.
  2. Select Maps JavaScript API.
  3. Add another API only when the implementation requires it.
  4. Select Save.

Do not enable Places, Routes or Geocoding simply because they sound related. Restrict the key to the services actually used by the website or module.

Security tip: Use separate keys when browser-based and server-side applications require different restriction types. Apply website restrictions to browser traffic and IP-address restrictions to applicable server-side web-service calls.

How to Test Your Google Maps API Key

The most useful test is the website or integration where the key will be used.

  1. Copy the restricted API key.
  2. Open the module, application or website configuration.
  3. Paste the key into the relevant field.
  4. Save the configuration.
  5. Open the page where the map should appear.
  6. Test important pages such as checkout and delivery-point selection.
  7. Open the browser developer console if the map does not load.

A newly created or modified key may take a few minutes to be recognized. When a map is darkened, watermarked, or unavailable, open the browser’s JavaScript console and identify the specific Google Maps error.

A browser key will normally be visible in client-side requests. Its protection comes from appropriate website and API restrictions, not from attempting to hide it inside public page code.

How to Monitor Usage and Costs

After the key works, review its usage regularly.

Monitor:

  • Request volume
  • Map loads
  • API errors
  • Quota consumption
  • Billable SKUs
  • Unexpected traffic
  • Forecasted spending

Google Maps Platform uses free monthly usage caps and automatic volume discounts on a per-SKU basis. Free usage resets monthly, and the amount depends on the service and pricing category.

Use budget alerts to receive spending notifications. Quotas can also control request volume, but a quota that is too low may stop a map or integration from working during normal traffic.

Using a Google Maps API Key in Ecommerce

Store locator pages

A store locator can display shops, warehouses, showrooms or authorised retailers.

Depending on its features, the locator may use:

  • An interactive map
  • Location markers
  • Address search
  • Place details
  • Route or distance information

Only enable the APIs used by the locator.

Shipping and delivery-point selection

Some shipping modules use an interactive map to show nearby collection points.

The Common Services Colissimo Domicile et Points de Retrait module displays nearby pickup points using Google Maps and supports pickup-point information, address search, routes, and Street View.

For So Colissimo Flexibilité, restrict the Google Maps API key to the store’s authorised domains and required APIs, then add it to the module settings. Create and restrict the credential through the current Google Cloud interface.

Not every Colissimo module requires Google Maps

The pickup-point map in the current Colissimo Etiquetage / SoNice module does not require a Google Maps API key. Check the documentation for the exact product and version installed on your store.

Chronopost shipping rates

Google Maps can support map and location functions, but it does not automatically calculate carrier prices.

The Chronopost app for Shopify supports shipping-rate, label, and tracking workflows. Eligible shipping prices are retrieved through the Chronopost web service rather than calculated by Google Maps.

How Much Does Google Maps API Cost in 2026?

Google Maps Platform uses pay-as-you-go pricing based on individual SKUs. A billable event may be a request, map load or another action defined for a particular service.

On 1 March 2025, Google replaced the universal $200 monthly credit with monthly free usage caps for individual Core Services SKUs. It also expanded automatic volume discounts for most services.

Current global pricing examples include:

SKUMonthly free usageFirst paid rate
Dynamic Maps10,000 events$7 per 1,000 events
Static Maps10,000 events$2 per 1,000 events
Maps EmbedUnlimitedNo usage charge listed
Dynamic Street View5,000 events$14 per 1,000 events

Before estimating costs, confirm the current free usage limit and paid rate for every SKU used by the implementation.

The prices above are in US dollars. Higher usage tiers have different rates, and services such as Places, Routes and Geocoding have separate SKUs and pricing.

Before estimating costs:

  1. Identify every API used.
  2. Find the relevant SKU for each service.
  3. Estimate monthly requests or map loads.
  4. Apply the corresponding free usage cap.
  5. Review Google’s current pricing.
  6. Create budget alerts and monitor actual usage.

Pricing warning: Do not estimate costs using map loads alone when the implementation also calls Places, Routes, Geocoding or another billable service.

Common Google Maps API Key Errors

ErrorLikely causeWhat to check
MissingKeyMapErrorNo key was includedCheck the module field or map request
InvalidKeyMapErrorThe key is not recognisedConfirm the copied key and project
ApiNotActivatedMapErrorMaps JavaScript API is disabledEnable it in the project that owns the key
BillingNotEnabledMapErrorBilling is inactiveLink the project to an active billing account
RefererNotAllowedMapErrorThe website is not authorisedCorrect the website restrictions
ApiTargetBlockedMapErrorThe key cannot access the requested APIReview the API restrictions
OverQuotaMapErrorA usage limit was exceededReview current traffic and quotas

Use the Maps JavaScript API error reference when the browser console returns an error that is not covered in this table. A darkened map or “for development purposes only” watermark usually indicates a key or billing problem.

The map works on staging but not on the live store

Check whether:

  • The production domain is included in the restrictions
  • Both www and non-www versions are needed
  • The website uses HTTPS consistently
  • The correct project owns the key
  • Maps JavaScript API is enabled in that project
  • A cache still contains the old key
  • Another plugin or module is loading Google Maps on the same page

Do not leave the key unrestricted as a permanent fix.

Frequently Asked Questions

Is a Google Maps API key free?

Creating the credential does not have a separate fee. Usage is billed by SKU, and each SKU can include a monthly free usage cap. Charges may apply when usage exceeds that allowance.

Do I need billing to use Maps JavaScript API?

A standard production setup requires billing. Google’s Maps Demo Key can be used for limited testing without billing information, but it is not designed for production use.

Should I restrict my Google API key?

Yes. Apply both application and API restrictions to reduce unauthorised usage and unexpected charges.

Why does my map say “For development purposes only”?

This usually indicates a problem involving the API key or billing. Check the browser console and verify the key, enabled API, billing account and website restrictions.

Does every Colissimo or Chronopost integration require Google Maps?

No. So Colissimo Flexibilité has documented Google Maps key settings, while Colissimo Etiquetage / SoNice states that its pickup-point map does not require one. Chronopost shipping-rate retrieval is documented as using the carrier’s web service.

Use the Right Shipping Integration for Your Store

Need a Google Maps API key for your shipping module? Follow the project, billing, restriction and testing steps above before adding the credential to your store.

For PrestaShop home delivery and pickup-point selection, review the Colissimo Domicile et Points de Retrait module.

For a current Colissimo label and pickup-point solution that does not require a Google Maps key, explore Colissimo Etiquetage / SoNice.

For Shopify shipping-rate, label and tracking workflows, review the Chronopost app.

Google Maps requirements differ between integrations. Confirm whether the exact Common Services product and version installed on your store requires a Google Maps API key before creating or adding the credential.