Google Maps is a web-based mapping service that provides geographic regions and road maps of any part of the world. However, some website owners are getting the error »This page cannot load google maps properly» instead of loading google map. This error can also be displayed as »This page did not load Google Maps correctly. See the JavaScript console for technical details «.
¡UPS! Something went wrong. This page did not load Google maps correctly.
Note: this solution is intended for website owners and not the conventional user.
What causes Google Maps to not load correctly?
Google Map plugins would work great without any errors, but things have changed in recent years when Google changed its rules for websites with embedded maps. Website owners could get this to work earlier just by embedding code, but now they require the API key for Google Map to work properly. If you have already added the API key, you can see the tab “Inspect element -> Console” in Chrome to see the exact reason why Google is not allowing Google Maps to be on their site. This may be due to an incorrect password, the password is restricted, etc.
Add Google API key to your site settings
To make Google Map work for your project or website, you need to create google api key and add it in your site settings. You must access the Google developers to create the key and correct any other errors.
If you have manually inserted the script for the maps, then it should be the following with your API key instead of TU_API_KEY
asyncdefersrc="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript">
Since WordPress is the most popular CMS out there, more than 172 millions of websites that use it; we will demonstrate the steps only for WordPress.
-
Go to plugin settings, the one you are using for Google Maps and should have an option to add the API key. If you don't have it, you are probably using an older version of a plugin or an outdated plugin.
Google API plugins in WordPress -
Keep the API key settings open on your WordPress site.
-
Go to Google Cloud Resource Manager
-
Access Google if you have not yet logged in
-
Click on »Create a project«, Give the project a name and click »Create».
Create a project -
Go to the Google website “Activate the API”.
-
Click »Select a project» at the top, then select the new project you just created and Continue
-
Press »Activate API and services«
-
Search for »Maps JavaScript API» and open it.
-
Then press the button »Enable»
Enabling the API for the project -
Click on the navigation menu, select »API and services» and go to »Credentials«
-
Click the Create credentials drop-down menu and select “API key”
Note: you can create a restriction key to prevent unauthorized use if you want
-
Click on »Close» and then click on the created key
-
Select »HTTP References» under Application Restrictions.
-
Add your website URL and click “Keep”
-
Now copy the key and go back to the WordPress site.
Creating the API key for the site -
Scroll down under the left panel and go to »Settings«
-
You will find an option for »Google API KEY«, open it and paste the key there.
-
Save the configuration, go to your page and update it.
Note: make sure your billing is enabled because Google only allows $ 300 credit o 12 months of free use (whichever decreases faster). After that, billing must be configured and implemented.
