Google Maps shows “For development purposes only”

If you’re seeing the “For development purposes only” watermark on your Google Maps embed, it indicates that there is an issue with your API key. This guide will walk you through the steps to fix the problem and get Google Maps working on your website correctly.

Why Does This Happen?

The “For development purposes only” message appears when:

1. Your Google Maps API key is not set up correctly.
2. Your API key does not have billing enabled.
3. The API key is restricted, preventing it from working on your domain.

Steps to Fix the Issue

Step 1: Get a Google Maps API Key

If you haven’t already, you need to create a Google Maps API key:

1. Go to the Google Cloud Console.
2. Log in to your Google account (or create one if you don’t have one).
3. Create a new project or select an existing project.
4. Navigate to APIs & Services > Credentials.
5. Click Create credentials and select API key. This will generate a new API key that you can use.

Step 2: Enable Billing for Your Google Cloud Account

Google Maps API requires billing information to be enabled on your account, even for basic usage:

1. Go to the Google Cloud Console.
2. Select your project.
3. Click on the Billing section.
4. Add a payment method and set up billing if you haven’t done so. Google provides a free tier of usage, so in many cases, you will not incur charges unless your usage exceeds the free quota.

Step 3: Enable the Required APIs

Ensure the necessary Google Maps APIs are enabled:

1. In the Google Cloud Console, select your project.
2. Go to APIs & Services > Library.
3. Search for “Maps JavaScript API” and click Enable.
4. Depending on your use case, you may also need to enable other APIs like Geocoding API, Places API, and Directions API.

Step 4: Restrict Your API Key (Optional but Recommended)

To prevent unauthorized use, restrict your API key:

1. Go to APIs & Services > Credentials in the Google Cloud Console.
2. Select the API key you created.
3. Under Key restrictions, choose:
   • HTTP referrers (websites): Restrict the key to specific domains. For example, enter your website with a wildcard asterisk at the end, https://www.yourwebsite.com/*.
4. Under API restrictions, select the APIs you wish to restrict (e.g., Maps JavaScript API, Geocoding API).
5. Click Save.

Step 5: Update Your Website with the API Key

If you already have Google Maps embedded on your website, check the code to ensure the correct API key is being used. Look for the script tag in your HTML that loads Google Maps, and update the ‘key’ parameter with your new API key:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

Replace YOUR_API_KEY with the API key you generated.

If you’re using a WordPress website you may need to enter your API key in your theme options or in a plugin.

Some WordPress plugins exist, such as API KEY for Google Maps which allow you to enter your API key and it will attempt to override the Google API key setting across your theme or plugins.

Step 6: Clear Cache and Test

After updating your API key:

1. Clear your browser cache.
2. Clear any server-side caching mechanisms (e.g., WordPress cache plugins).
3. Reload your website to check if the “For development purposes only” message is gone.

Additional Tips

• Double-check that the correct API key is used on all pages where Google Maps is embedded.
• Make sure you have enabled the appropriate APIs for the functionality you need.
• If you encounter an error message in the browser’s developer console, search for the error code on the Google Maps Platform documentation.