Skip to content

How to generate Google Maps API Key for WordPress?

Updated On : September 28, 2026By : Reading Time : 2 minutes

Key Takeaways

  • Google Cloud exige una clave de API para cada mapa que sirve en el sitio, y esta guía la crea en Google Cloud y la conecta al bloque Google Map en Nexter Blocks.
  • La clave se restringe a Maps JavaScript API y a Websites, con un dominio como https://example.com/*, porque el bloque usa la API JavaScript y no Maps Embed API.
  • Nexter > Extra Options > Settings activa Connect Google Maps API Key, pega la clave en Enter API Key y guarda; una sola clave sirve para todos los bloques Google Map del sitio.
Table of Contents

Google requires an API key for every map it serves on your site.

This guide creates the key in Google Cloud and connects it to the Google Map block in Nexter Blocks.

For every Google Map setting in one place, see the Google Map block guide.

LIVE BLOCK LINK

Before You Start

  • Edition: Free — the API key works for the Google Map block in Nexter Blocks (free) and with Nexter Blocks Pro.
  • Block to enable: Google Map, switched on under Nexter > Blocks in your WordPress dashboard.
  • A Google account and a payment card for Google Cloud billing. Google gives a monthly free usage allowance; check current pricing on Google’s site.

Create a Project and Billing

Google Cloud changes its screens often, so yours may look slightly different.

  1. Open the Google Maps Platform credentials page and create a new project. Give it a name and click Create.
Creating a new project in Google Cloud
  1. Choose your country, accept the terms and continue.
Choosing the country and accepting the terms in Google Cloud
  1. Create a billing account: name it and continue.
Naming a new billing account in Google Cloud
  1. Fill in the account type, tax and payment details and click Submit and Enable Billing.
The billing information form in Google Cloud
  1. Link the billing account to your project with Set Account.
Linking a billing account to the project

Get and Restrict the Key

  1. Answer Google’s short questions. Your API key then appears. Copy it.
Google Maps Platform showing the new API key
  1. Open the key’s settings. Under API restrictions, choose Restrict key and select Maps JavaScript API. Do not pick Maps Embed API: the block uses the JavaScript API.
  1. Under Application restrictions, choose Websites and add your domain, for example https://example.com/*. Save.
  1. Check APIs in the left menu to confirm Maps JavaScript API is enabled.
The list of enabled APIs in Google Maps Platform

Connect the Key in Nexter

  1. In WordPress, go to Nexter > Extra Options > Settings.
  1. Turn on Connect Google Maps API Key, click its settings gear, paste the key into Enter API Key and click Save.
The Connect Google Maps API Key card in Nexter Extra Options Settings

How It Behaves

  • One key serves every Google Map block on your site.
  • The block loads Google’s Maps JavaScript API with this key on pages that contain a map.
  • Restricting the key to your domain stops other sites from using it.

Limitations

  • Google requires billing on the project, even if your traffic stays inside the free allowance.
  • A key restricted to the Maps Embed API only will not work with this block.

Troubleshooting

The map shows “This page can’t load Google Maps correctly”

Billing is not active, the Maps JavaScript API is not enabled, or the key’s website restriction does not match your domain. Fix it in Google Cloud and reload the page.

It works on my live site but not on staging

Add the staging domain under Application restrictions.

Related Docs

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

What do I need before generating a Google Maps API key for WordPress?

A Google account, a payment card for Google Cloud billing, and the Google Map block enabled under Nexter > Blocks are the starting points. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides the Google Map block in both free and Pro versions. Billing matters even if you stay inside Google’s monthly free usage allowance.

Why does the Google Maps API key need billing enabled?

Google requires billing on the project even when your traffic stays within the free allowance. That is why the tutorial creates a billing account and links it to the project before the key is used in Nexter Blocks. If billing is not active, the map can fail with Google’s error message instead of loading normally.

Which API should I restrict the key to for the Google Map block?

The key should be restricted to Maps JavaScript API, not Maps Embed API. The block loads Google’s Maps JavaScript API with this key on pages that contain a map, so an Embed-only key will not work here. Restricting it correctly also reduces misuse if someone copies the key from your site.

How do I stop other websites from using my Google Maps key?

Use Application restrictions and choose Websites, then add your domain such as https://example.com/*. That ties the key to your site instead of leaving it open. The tutorial also notes that one key serves every Google Map block on your site, so domain restriction is the main control that keeps it from being reused elsewhere.

Why does my map show 'This page can't load Google Maps correctly'?

That error usually points to one of three problems: billing is not active, Maps JavaScript API is not enabled, or the website restriction does not match your domain. The fix is in Google Cloud, not in WordPress. Once those settings are corrected and you reload the page, the map should load with the same key used by Nexter Blocks.

Why does my map work on live but not on staging?

Staging usually needs its own domain added under Application restrictions. The key is checked against the exact website allowed in Google Cloud, so a live-only restriction can block staging even when everything else is correct. Adding the staging domain keeps one key usable across both environments without opening it up to unrelated sites.

Last reviewed: September 28, 2026

Related Docs

How to Add a Before and After Opacity Slider in WordPress?
icon
How to Add a Blend Cursor in WordPress?
icon
How to Add a Blockquote in WordPress?
icon
How to Add a Button in a WordPress Message Box?
icon
How to Add a Button in WordPress Timeline?
icon
How to Add a Call to Action Banner in WordPress?
icon
123………………………………………………………………53