Documentation

Google Maps API Keys: How to Create Server and Browser Keys

Last modified: January 14, 2025

Follow the steps below to create both the Server and Browser API keys required for your Google Maps integration. These Google Maps API keys are essential for enabling various geolocation features in the plugin.

Step-by-Step Guide to Google Maps API Keys

1. Go to the Google Cloud Console

2. Create a New Project or Select an Existing One

  • In the top navigation bar, click the Project Selector.
  • Select an existing project or click New Project to create a new one.
  • Give your project a name and click Create.

3. Enable Google Maps APIs

  • From the Dashboard, click APIs & Services > Library.
  • Search for the following APIs:
    • Maps JavaScript API
    • Geocoding API
    • Places API
  • Click on each API and then click the Enable button.

4. Create a Browser API Key

  • Go to APIs & Services > Credentials.
  • Click + Create Credentials > API Key.
  • An API key will be generated. Copy this key for later use.
  • Click Restrict Key to limit its usage:
    • Application restrictions: Select HTTP referrers (websites).
    • Add your website's domain (e.g., https://example.com/*).
    • API restrictions: Enable Maps JavaScript API, Places API, and Geocoding API.
  • Save your changes.

5. Create a Server API Key

  • While still on the Credentials page, click + Create Credentials > API Key.
  • Another API key will be generated. Copy this key as well.
  • Click Restrict Key:
    • Application restrictions: Select IP addresses.
    • Add the IP address of your server.
    • API restrictions: Enable Geocoding API and Places API.
  • Save your changes.

Final Note

Having properly configured Google Maps API keys is essential for ensuring the smooth operation of your geolocation features. By following the steps outlined above, you can securely integrate Google Maps into your project and unlock advanced mapping capabilities.

If you encounter any issues or need further assistance, don’t hesitate to refer to the Google Maps API Documentation or reach out to our support team.

Helpful Links

menu-circle