Login

How to get a Google Maps API key and Map ID

Google shows its maps only to sites that send an API key. Without a key, or with a key that is set up wrong, the map stays grey or shows the message “This page didn’t load Google Maps correctly”. This guide walks you through creating the key, connecting it to Easy Google Maps and – for the new Advanced Markers – creating a Map ID. It takes about 10 minutes.

What you need: a Google account, a payment card for the Google Cloud billing account, and access to your WordPress dashboard.

Step 1. Create a Google Cloud project

  1. Open the Google Cloud Console and sign in with your Google account.
  2. Click the project selector at the top of the page, then New project.
  3. Enter a name you will recognise later, for example My website maps, and click Create.
  4. Make sure the new project is selected in the project selector before you continue.

Step 2. Turn on billing

Google Maps Platform works only in projects with an active billing account. Google includes a free monthly usage allowance for every Maps product, and most small and medium websites stay within it.

  1. Open the menu ☰ → Billing.
  2. Link an existing billing account to the project, or click Create account and add your payment details.
  3. Recommended: open Budgets & alerts and create a small budget, so Google emails you if usage ever grows.

Step 3. Enable the APIs the plugin uses

Open the menu ☰ → APIs & Services → Library, search for each API below, open it and click Enable.

API What it does in Easy Google Maps Needed
Maps JavaScript API Shows the map and the markers on your site and in the map editor Always
Geocoding API Finds an address when you add a marker, so you don’t have to type coordinates Recommended
Places API Address search and autocomplete on the map Only if you use search features
Directions API Routes and directions between points Only if you use directions

Google is moving some services to new versions. If you can’t find “Places API” or “Directions API” in the library, enable “Places API (New)” and “Routes API” instead.

Step 4. Create the API key

  1. Go to APIs & Services → Credentials.
  2. Click Create credentials → API key.
  3. Google shows the new key. Copy it – it looks like AIzaSyA1b2C3d4E5f6G7h8I9j0K...

Step 5. Restrict the key

A restricted key works only on your website and only for the APIs you chose, so nobody can use it on another site at your expense. On the Credentials page, click the name of your key.

  1. Under Application restrictions, choose Websites and add every address your site opens on, each on its own line:
    • https://example.com/*
    • https://www.example.com/*
    • your staging or test domain, if you have one

    Replace example.com with your own domain.

  2. Under API restrictions, choose Restrict key and tick the APIs you enabled in Step 3.
  3. Click Save. Changes can take up to 5 minutes to start working.

Step 6. Add the key to Easy Google Maps

  1. In your WordPress dashboard, open Easy Google Maps → Settings.
  2. Paste the key into User API key, without spaces before or after it.
  3. Optional: set API Region (for example US or DE) to show borders and place names the way they appear in your country.
  4. Click Save and open any page with a map – it should load right away.

Step 7. Create a Map ID for Advanced Markers (recommended)

Google has replaced its classic markers with Advanced Markers: sharper, faster and more flexible. Advanced Markers work only on maps that have a Map ID. Without a Map ID, Easy Google Maps keeps working with classic markers, so this step is optional – but it is the way forward.

Create the Map ID in Google Cloud

  1. In the Google Cloud Console, open the menu ☰ → Google Maps Platform → Map management. Use the same project as your API key.
  2. Click Create Map ID.
  3. Enter a name, for example Website map, and set Map type to JavaScript.
  4. Choose Raster (looks like the classic Google map) or Vector (smoother zooming and tilt). Advanced Markers work with both.
  5. Click Save and copy the Map ID – a code like 8f3a1c2b4d5e6f70.

Add the Map ID to your map

  1. In WordPress, open Easy Google Maps, edit your map and find the Google Map ID field.
  2. Paste the Map ID and click Save.
  3. Reload the page. The markers on this map are now Advanced Markers.

Each map has its own Map ID field, so you can switch maps one by one. Leave the field empty to keep classic markers on a map.

Map themes when a Map ID is set

With a Map ID, Google styles the map from your Google Cloud project, so the map theme selected in the plugin is not applied to the published map. To keep your theme:

  1. In the map editor, click Copy JSON or Download JSON under the theme settings.
  2. In the Google Cloud Console, open Google Maps Platform → Map styles → Create style, choose Import JSON, paste the code and save the style.
  3. Open Map management, select your Map ID and choose the new style for it. Save.

Style changes in Google Cloud can take a few minutes to appear on your site.

Troubleshooting

Open your site, press F12 and look at the Console tab – Google names the exact problem there.

Message in the console How to fix it
MissingKeyMapError No key was found. Paste it into Easy Google Maps → Settings → User API key and save.
InvalidKeyMapError The key is wrong or copied with extra characters. Copy it again from APIs & Services → Credentials.
RefererNotAllowedMapError Your site address isn’t in the key’s Websites list. Add it in both forms, with and without www, followed by /*.
ApiNotActivatedMapError The Maps JavaScript API is not enabled in the project. Enable it in APIs & Services → Library.
ApiTargetBlockedMapError The key’s API restrictions don’t include an API the map needs. Tick it under API restrictions.
BillingNotEnabledMapError or a dark map with “For development purposes only” Billing is not active for the project. Link a billing account (Step 2).
The address search doesn’t find places Enable the Geocoding API and add it to the key’s API restrictions.
Advanced Markers don’t appear after adding a Map ID Check that the Map ID type is JavaScript, that it was created in the same project as the API key, then save the map and reload the page.
The map looks different after adding a Map ID That is expected: the style now comes from Google Cloud. Import your theme as described in Step 7.

Keep costs under control

  • Set a budget alert in Billing → Budgets & alerts.
  • Limit daily use in APIs & Services → open an API → Quotas.
  • Always keep the key restricted to your website (Step 5).

Still stuck? Write to us through the support form and include the message from your browser console – we will help you get the map running.

Categories
Related Articles
Latest Articles

We use cookies to improve your browsing experience and analyze traffic. By clicking "Accept", you agree to the use of all cookies in accordance with our Privacy Policy.