---
title: "How to generate Elementor Google Maps Widget API Key?"
url: https://theplusaddons.com/docs/generate-elementor-google-maps-api-key/
date: 2023-02-04
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "The Google Map map type in The Plus Addons for Elementor loads Google's own maps script, and Google will only serve that script to a site with a valid API..."
image: https://theplusaddons.com/wp-content/uploads/2020/10/How-to-generate-Elementor-Google-Maps-Widget-API-Key_-1024x536.jpg
word_count: 940
---

# How to generate Elementor Google Maps Widget API Key?

## 

- The Plus Addons for Elementor Google Map widget loads Google’s Maps JavaScript API, so a valid API key is required or the map appears greyed out with “For development purposes only.”
- Google Cloud setup for the key includes creating a project, enabling billing, attaching a billing account, and restricting the key to Maps JavaScript API, with Geocoding API added only for WP Search Filter.
- Open Street Map (OSM) needs no key and no account, and Layout > Map Type switches the widget between Google Map and OSM.
- Google Map widget version 6.5.0 has a published-page defect where the editor shows the map but the live page stays empty with tp_map_gmap is not defined in the browser console.

The **Google Map** map type in The Plus Addons for Elementor loads Google's own maps script, and Google will only serve that script to a site with a valid API key. Without one the map comes back greyed out, stamped "For development purposes only".

Getting a key means creating a project in the Google Cloud console, enabling billing on it, and copying the key into the plugin's settings. If you would rather not do any of that, set **Layout > Map Type** to **Open Street Map (OSM)** instead — it needs no key and no account.

*To check the complete feature overview documentation of The Plus Addons for Elementor Google Map widget, [click here](https://theplusaddons.com/docs/google-maps-elementor-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/google-maps/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — the Google Map widget ships only with The Plus Addons for Elementor Pro. With the free plugin alone it is shown in the Elementor panel as a locked Pro widget and cannot be added to a page.- **Widget to enable:** Google Map, switched on under **The Plus Addons > Widgets** (search for it under **Essential**).- **Two map types:** **Google Map** needs a Google Maps API key, **Open Street Map (OSM)** needs none. You choose between them in **Layout > Map Type**.- **A Google account** and a payment method. Google's billing screen states that Google Maps Platform requires a paid billing account, with usage above the free monthly credit billed to it.- **The API you need is the Maps JavaScript API.** That is the one the widget loads.

## What the Widget Asks Google For

The plugin adds this script to any page that carries the widget, with your key on the end of it:

`https://maps.googleapis.com/maps/api/js?key=<your key>&libraries=places&sensor=false`

So the key needs the **Maps JavaScript API** enabled. If you also switch on **Extra Options > Override for WP Search Filter**, the widget calls Google's **Geocoding API** as well, and that one has to be enabled too.

## Create the Key in Google Cloud

These steps happen on Google's side, in the [Google Cloud console](https://console.cloud.google.com/). Google changes this console from time to time, so treat the screens below as a guide rather than an exact match.

- Create a project. Give it a name, choose a location and click **CREATE**.

![Google Cloud: the New Project form](https://theplusaddons.com/wp-content/uploads/2023/02/google-map-api1-1024x506.png)

- Set up billing for the project. Google asks for a country, agreement to its terms, and then a billing account with a payment method.

![Google Cloud: creating a billing account for Google Maps Platform](https://theplusaddons.com/wp-content/uploads/2023/02/google-map-api3-1024x472.png)

- Attach that billing account to the project.- Google then shows the key it has generated. Copy it, and keep it somewhere safe.

![Google Cloud: choosing the billing account for the project](https://theplusaddons.com/wp-content/uploads/2023/02/google-map-api5-1024x506.png)

![Google Cloud: the generated API key, ready to copy](https://theplusaddons.com/wp-content/uploads/2023/02/google-map-api8-1024x506.png)

- Restrict the key so it can only be used for what you need. Choose **API restriction** and tick **Maps JavaScript API** — plus **Geocoding API** if you plan to use the WP Search Filter option. You can check which APIs are enabled on the project from the **APIs** page.

![Google Cloud: the list of enabled APIs for the project](https://theplusaddons.com/wp-content/uploads/2023/02/google-map-api12-1024x503.png)

> *Restricting the key to the wrong API is the most common reason a map stays blank after setup. The widget loads the Maps JavaScript API, so that is the one the key must allow.*

## Save the Key in The Plus Addons

- In WordPress, go to **The Plus Addons > Extra Options > Settings** and scroll to the **API** block.- Find the **Google Map API** card and make sure its switch is on.

![The Google Map API card in The Plus Addons settings, with its switch on](https://theplusaddons.com/wp-content/uploads/2026/09/gmaps-api-settings.webp)

- Click the gear icon on that card. A **Google Map API** dialog opens.- Paste your key into **Map API Key** and click **Save**.

![The Google Map API dialog with the empty Map API Key field and the Save button](https://theplusaddons.com/wp-content/uploads/2026/09/gmaps-api-key.webp)

## How to Tell It Worked

Open a page that has the Google Map widget on it in the Elementor editor. Until the key is accepted, Google draws the map greyed out with "For development purposes only" written across it and shows its own message:

![Elementor editor: a greyed-out Google map with Google](https://theplusaddons.com/wp-content/uploads/2026/09/gmaps-nokey-error.webp)

That message and the grey wash come from Google, not from the plugin, and they are how Google reports a key it will not accept.

## Limitations

- **Google Map map type, version 6.5.0:** a widget set to **Map Type > Google Map** draws in the Elementor editor but leaves an empty space on the published page, with `tp_map_gmap is not defined` in the browser console. This happens with or without a valid API key. **Open Street Map (OSM)** is not affected.- **Billing is part of the setup.** Google's own billing screen states that Google Maps Platform requires a paid billing account, with usage above the free monthly credit billed to it.- **One key for the whole site.** The key is a single site-wide setting; you cannot use a different key per page or per widget.- **The key is stored as plain text** in the WordPress options table, so restricting it on Google's side is what actually protects it.

## Troubleshooting

### The editor still shows "This page can't load Google Maps correctly"

Either the key was not saved, or Google is refusing it. Re-open **The Plus Addons > Extra Options > Settings > Google Map API** and check the key is in **Map API Key**, then check on Google's side that the project has billing enabled and that the key allows the **Maps JavaScript API**.

### The map works in the editor but not on the published page

That is the 6.5.0 defect above, not your key. Switch the widget to **Open Street Map (OSM)** if you need a map live now.

### I do not want to set up billing at all

Set **Layout > Map Type** to **Open Street Map (OSM)**. It draws from OpenStreetMap tiles, needs no key, and its own settings live in **Content Source** and **OSM Map Setting**.

## Related Docs

- [How to Remove Elementor Google Maps API Error browser console?](https://theplusaddons.com/docs/remove-elementor-google-maps-api-error/)- [Google Maps Elementor Widget Settings Overview](https://theplusaddons.com/docs/google-maps-elementor-widget-settings-overview/)- [How to Add Multiple Location Pins in Elementor Google Maps?](https://theplusaddons.com/docs/elementor-google-maps-multiple-locations-pin/)