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 made an announcement regarding the discontinuation of support for keyless usage, implying that any client request lacking an API key or Client ID would no longer be accepted. This policy change took effect on June 11, 2018, eliminating keyless access completely. Consequently, starting from June 11, 2018, Google mandated billable access to the Google Maps Platform API.

After this update, users attempting to view the map page of a website without an API key are likely to encounter a Google Maps error. To prevent such service interruptions on your websites, it is essential to take necessary steps. To do so, visit Google's Get Started page to enable a billing account and generate an API key. Once you have successfully generated and secured an API key, ensure that you update your applications with the new API key to ensure continued seamless access to Google Maps services.

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.