Is Google Maps no longer working on your website? See what changed and how to fix it.

In recent months, many websites have stopped displaying Google Maps correctly, showing messages such as “For development purposes only”, loading errors, or blank backgrounds.
This happens because Google has changed the usage rules for Google Maps, requiring stricter configurations, and, in many cases, it is no longer free.

In this article, we explain:

• What has changed?
• What type of integration can still be used for free?
• What you need to do to ensure your map works properly.

What has changed in Google Maps?

Since 2018, and more strictly over the past two years, Google has required:

• The use of a valid API Key.
• The mandatory association of a payment method.
• Manual activation of the APIs you wish to use.
• Setting up billing limits to avoid unexpected costs.

In short, Google Maps still offers a free version, but you must configure everything correctly, even if you never end up paying anything.

What’s causing the error on your website?

If your site’s map:

• Doesn’t load at all.
• Appears with a grey background.
• Displays the warning “For development purposes only”.
• Shows error messages in the browser console.

... then it’s likely that you are using:

• An invalid or missing API Key.
• A Google account without active billing.
• An outdated plugin or integration (in the case of WordPress or a similar CMS).

Is there a way to use Google Maps without an API Key?

Yes, and this option is often overlooked.

✅ You can use the embed mode with an iframe

If you only need to display a simple map showing a single location, you can embed the code directly from the Google Maps website. In this mode:

• No API Key is required.
• No billing is required.
• It’s free and stable for basic use.

How to get the iframe:

1. Go to maps.google.com.
2. Search for the desired location.
3. Click on “Share” > “Embed a map”.
4. Copy the HTML code (iframe) and paste it into your website.

Ideal for contact pages, single locations, or quick solutions.

⚠️ Note: this mode does not allow customisation, multiple markers, or interaction with other data. It’s a simple and straightforward solution.

When do you actually need to use an API Key?

If you want something more advanced, such as:

• Customising the map’s appearance (colours, icons, zoom).
• Displaying multiple markers or locations.
• Generate directions based on the user’s position.
• Using traffic, distance, or dynamic location data.
• Integrating with other systems (CRM, booking, shop, etc.).

... then you’ll need to use an API Key with active billing.

How to properly configure the API Key (step by step)

If you choose to use the version with an API Key, follow these steps:

1. Create a project in Google Cloud Platform:
   • Google Cloud Console.
   • Create a new project or reuse an existing one.
     
     
2. Activate the required API (e.g., Maps JavaScript API):
   • Left menu > APIs & Services > Library.
   • Search for the API and click “Enable”.
     
     
3. Create the API Key:
   • Menu > APIs & Services > Credentials > Create Credentials > API Key.
   • Copy the generated key.
     
     
4. Restrict the key (security):
   • Restrict by domain (e.g., www.yoursite.com).
   • Restricted by the API type used.
     
     
5. Add a payment method:
   • Even if you don’t exceed the free usage limit, it’s mandatory to add a valid credit card.
   • Your account receives USD 200/month in free credit, enough for thousands of monthly loads.
     
     
6. Replace the key on your website:
   • Insert it directly into the code.
   • Or use the dedicated field in your theme/plugin (for example, in WordPress).
     
     

What if your website is WordPress?

Many older plugins have become incompatible with Google’s new policy. You may need to:

• Update the plugin or theme.
• Replace it with a more modern version.
• Check that the API Key field is correctly filled in.
• Confirm that the API is activated in Google Cloud.

In many cases, it’s worth asking a technical team to handle the integration securely.

Could there be unexpected costs?

Google offers USD 200/month per account, which covers:

• 10,000 static map loads.
• 10,000 dynamic map loads.

If you exceed these limits, Google will start charging. You can set usage limits and alerts in the Google Cloud billing dashboard to avoid surprises.

Are there alternatives to Google Maps?

Yes. Increasingly, projects are adopting alternative solutions, such as:

• OpenStreetMap (open source, free).
• Mapbox (modern, with a free plan).
• Leaflet.js (a library for using open-source maps with external tiles).

These are good options for those who want more control over costs or independence from Google, but they may be more complex to implement and have less support.

Conclusion

Google Maps remains a powerful tool, but it’s no longer as plug-and-play as it once was. If you want to use customised maps with interactivity or multiple data sources, you need to configure everything correctly with an API Key and billing.

If, on the other hand, you just need to display a simple location, the embed mode via iframe remains free and practical.

⚙️ Need help configuring your Google Maps?

We handle the full API setup, website integration, security, and cost control. We can also suggest alternatives if you prefer to move away from Google. We take care of everything for you, no hassle.