Select Page

So you have recently deployed or transferred your WordPress website with Divi on Google Cloud Platform and your divi map module isn’t working anymore, showing error like

Oops! Something went wrong.
This page didn’t load Google Maps correctly. See the JavaScript console for technical details.

Divi Google Maps Api Error Oops! Something went wrong.

In the Google documentation, there are several different ways to obtain a key. You did a lot of search on the internet but couldn’t find any working solution?

Well, then you have landed on the right page, in this tutorial, I am going to demonstrate how you can easily create an API key and fix Oops! Something went wrong error for Google Map on Divi powered WordPress website hosting on Google Cloud Platform.

Common possible error codes returned by the Google Maps

This error has turned into a very common widespread ever since Google Maps have discontinued supporting keyless API access(any request that doesn’t include an API key) after allowing  FREE access to keyless usage for around a decade.

On June 22, 2016, Google has also released a post at their official blog about it. Check out Google Maps API no longer support keyless access for a detailed explanation of this update.

Listed below could be the most common errors :

google maps api error: apinotactivatedmaperror

You have not enabled the Google Maps API KEY.

google maps api error: invalidkeymaperror

You have entered an incorrect Google MAPS Javascript API KEY.

google maps api error: referernotallowedmaperror

You are trying to use a secured API key on a different website

google maps api error: deletedapiprojectmaperror

You are have deleted your project and trying to access deleted API Key

google maps api warning: noapikeys

Either you have not entered your API key or you have exhausted your daily 25,000 FREE Google MAP API loads limits. (Learn more about the Premium Plan Usage Rates and Limits)

Fixing Divi Google Maps API Error in 5 easy steps

if you are using Google Cloud Console the first step is to enable Google Maps Platform and Obtain a Google Maps API Key on GCP.

In order to achieve this login to your Google account and head over to

https://cloud.google.com/maps-platform/

click on GET STARTED as illustrated below :

Google-maps-api-get-started

Enable All 3 Google Maps Platforms by selecting

  • Maps
  • Routes
  • Places

Enable-Google-maps-platforms

Click Continue select your project from the drop-down menu and accept the terms of service and proceed to next step

Select-a-project-GSC

Following Pop up screen will show you this will enable 17 Maps Platform API(s) and create an API key for your implementation. Just click next and jump to the next step

enable-your-google-maps-API

There you have it you’re all set! Your Google Maps Platform API key is successfully generated. Simply copy it.

Google-Map-Platform-API-Key-success

Add Google Maps API Key in Divi Theme

Login to your WordPress dashboard navigate to Divi Library from the left menu to divi > theme option

divi-theme-options

Paste the Google Maps JavaScript API key in Divi Theme Options General Setting Tab and save it.

Pasting-google-maps-api-key-in-divi-theme

Usually, it is real time but sometimes it may take up to 5 minutes for settings to take effect.
Now after 5 minutes, simply go to the page where you have added Maps to Your Divi Website and refresh the page.
You will find out “this page didn’t load google maps correctly” error has been solved and your MAP is fully functional now 🙂

Divi-Oops-something-went-error-solved

Protecting the Google Maps API Key

The next step is to improve the security of your newly generated API key.

Before you proceed further, I’d like to inform you this step is completely optional you can totally skip it.

This is necessary for users:

  • Who have a high amount of traffic and requests 25,000 map loads per day.
  • Who are concerned about an unauthorized use of their API key from being used by a third party website or app, ultimately thresholding your daily 25k map load allowance without your permission.

So, securing your API key is a Brilliant Idea and I recommend you to do this.

How to secure Google Maps API key?

You can go to google maps API console directly by clicking API console button right below your API key. This opens up a new window.

API-console-linkOR

Directly follow this URL

https://console.developers.google.com/apis/credentials

You can give any name you want for instance I have given Google Maps API key DDM

specifying-Application-restrictions-Google-Maps-API

Scroll down Under Key restriction, choose “HTTP referrers”

Accept requests from these HTTP referrers (websites), add the two entries below

enter the entry described below as follow:

< http:// (or) https://*.delhidigital.marketing/*

(Replace delhidigital.marketing with your own domain name)

By keeping this entry (with asterisks *’s for wildcards) will help ensure your maps work on any URL within of your own website.

Click the Save button and you’re done! You have successfully secured your API key.

Feel free to share your thoughts on the Google API changes in the comments below. You can also use the comment section below if you are facing any difficulty setting up the API key on your favorite Divi map module running on Google Cloud Platform