This page didn't load Google Maps correctly

With the launch of Google Maps Platform, Google LLC introduced changes to their products, pricing, and support to provide users with greater flexibility, transparency, and control.

The changes made on the API (Application Programming Interface), most web programmers building websites with Google Maps integrated on it are receiving errors like "This page didn't load Google Maps correctly. See the JavaScript console for technical details."

There are 2 possibilities for this problem :

1. You didn't enter the API KEY for map browser.
2. You didn't enabling the API Library for this Google Maps JavaScript API.

In June 2016 Google announced that they would stop supporting keyless usage , this means that any client request that doesn't include an API key or Client ID. This went into effect on June 11 2018, and keyless access is no longer supported . On June 11, 2018 Google started requiring billable access to the Google Maps Platform API.

After that when you view the map page of a site not using an API key , you'll likely to see a Google Maps error that looks like this. To avoid this type of service interruption to your websites, visit Google's Get Started page to enable a billing account and generate an API key. Once you generate and secure an API key, make sure to update your application with the new API key .

Create a Google Maps API Key

Go to : https://developers.google.com/maps/documentation/javascript/get-api-key

1. On the Credentials page, click Create credentials > API key.
2. The API key created dialog displays your newly created API key.
3. Click Close.
4. The new API key is listed on the Credentials page under API keys.

Next step is to replace YOUR_API_KEY with the generated key:

src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"

Once you saved the code, wait for 5 minutes to refresh your webpage.

Enable your API Library

Go to: https://developers.google.com/maps/documentation/javascript/get-api-key

After login to Credentials page :

1. Select the project used to create the code for your Google Maps API.
2. On the API Page, click on Enable.
3. Once enabled, you can see a comprehensive data table of your Google Maps API.

After that you can refresh your webpage to check if Maps is successfully showing you locations.