Home / , / Google Maps โ€“ How to add Google API Key

Google Maps โ€“ How to add Google API Key

17042 views
Before reading this help file you may want to check this video. It explains how to create API Key for Google maps and how to set it on theme. Watch Video on Youtube

Why Do You Need an API Key?

Google Maps requires you to add your own API key before it can be used on your website. Since June 2018, Google requires a billing account to be set up, but you get $200/month of free usage, which is enough for most websites.

๐Ÿ”— More details on pricing:

How to Get a Google Maps API Key

Step 1: Log in to Google Cloud Console

Step 2: Set Up Your Billing Account

  • Google requires a billing account, even if you stay within the free $200/month limit.
  • Add your billing details in the Google Cloud Billing section.

 

Step 3: Create a New Project & Enable APIs

Create a new project in Google Cloud Console.

Go to Library API and enable the following 5 APIs:

  1. Maps JavaScript API
  2. Places API
  3. Geocoding API
  4. Geolocation API
  5. Street View Static API

Step 4: Get Your API Key

  • Select โ€œGET A KEYโ€ in the Google Cloud Console.
  • Click โ€œCreate APIโ€ to generate your key.

Step 5: Restrict Your API Key (Important for Security)

To prevent unauthorized use, restrict your key:

  • Use wildcard domainsย  (e.g., *.yourdomain.com) so it works on all pages of your site.
  • If you only enter yourdomain.com, the key will work only on the homepage (yourdomain.com).

Use wildcard domains:

Step 6: Add API Key to Theme Options

  1. Copy your API Key.
  2. Go to Theme Options โ†’ Map โ†’ Map Settings.
  3. Paste the API key and save changes.

Paste the key inย Theme Options > Map Configuration > Map General Settings > Google Maps API Key

  • Make sure you select Google Maps for Map System
  • Make sure you select Google Places for Places API

How to Check if Your API Key is Correct

If Google Maps does not load, check for errors:

  • Open your site in Chrome.
  • Right-click โ†’ Inspect โ†’ Console to see if there are any Google Maps error messages.
  • If needed, go to your Google Cloud Console and verify that your API key is properly set up and restricted.