Skip to content
Log in Sign up

How to Enable Google Maps and Obtain a Google Maps Key

Create a Google Maps API key in the Google Cloud console, switch on the three APIs the theme needs, and paste the key into your Listivo Panel so maps load on your site.

2 minute read

To run Google Maps on your website you need to generate a Google Maps API Key and add it to your Listivo Panel. Three APIs have to be enabled for it to work correctly:

  • JavaScript API
  • Geocoding API
  • Places API

Google's own documentation explains how to create this kind of key: https://developers.google.com/maps/documentation/javascript/

A billing account is required
Adding a billing account is required to display Google Maps on your website, even though Google only charges very popular sites.

Create the API key

  1. 1 Open the Google Cloud console

    Visit https://console.developers.google.com and sign in with your Google Account.

  2. 2 Click "Go to Console"

    The button sits in the top-right corner of the page.

    Google Cloud page header with a green arrow pointing at the blue "Go to Console" button, next to a "Contact sales" button.
  3. 3 Or click "Get started"

    On the Google Maps Platform page the same corner shows a Get started button instead.

    Google Maps Platform page header with a green arrow pointing at the blue "Get started" button, beside a "Contact" button and a "Console" link.
  4. 4 Check "Maps" and "Places"

    The setup dialog asks which products you want; tick these two and continue.

    "Enable Google Maps Platform" dialog with the Maps and Places checkboxes ticked and Routes left unticked, and a CONTINUE button in the corner.
  5. 5 Enter a new project name

    Type a name, accept the terms of service and go to the next screen.

    Project step of the wizard with "My Project" typed in the project name field, the Yes option selected for the terms of service, and the NEXT link at the bottom.
  6. 6 Choose a billing account

    Pick an existing billing account or create a new one. Google charges only very popular websites — you can read more about it here.

    Dialog headed "Set the billing account for project 'My Project'" listing one available billing account, with CANCEL and SET ACCOUNT buttons.

Make sure the required APIs are enabled

Please make sure the following APIs are enabled:

  • Maps JavaScript API
  • Geocoding API
  • Places API
Google Cloud APIs & Services dashboard with traffic, errors and latency charts, and the table of enabled APIs highlighted below them: Maps JavaScript API, Geocoding API and Places API.

If one of them is missing, click ENABLE APIS AND SERVICES, search for it — for example "Geocoding API" — and click Enable.

Top of the APIs & Services dashboard with an arrow pointing at the "ENABLE APIS AND SERVICES" button above the enabled APIs list.
Google Cloud API library searched for "Geocoding API", showing two result cards — Geocoding API and Maps JavaScript API — with an arrow pointing at the search box and the first card.

Add the key to Listivo

Copy the Google Maps API Key from the Credentials page and paste it into Listivo Panel > Settings > Maps > Google Maps API Key, then save the changes.

Google Cloud Credentials page with one entry in the API keys table and an arrow pointing at its masked key value, next to a copy icon.
Listivo Panel Settings screen in WordPress with the Maps tab open, showing Map Provider set to Google Maps, an empty Google Maps API Key field, and the Save Changes button.

Keep reading

Map Integration Overview: Learn About Options Integrating OpenStreetMap - A Hybrid Approach

Ask the people who build Listivo

We answer by email from support@tangiblewp.com. With Premium Support, we also fix your site when something breaks.

Send us a message What Premium Support covers 

We can also run your site for you, or build a new one.

Was this guide helpful?