The message “This page can’t load Google Maps correctly” may be a familiar one for any WordPress user who uses standard WP Google Maps elements. The appearance of this message has increased vastly since Google Maps has made use of API keys, mandatory for its users since June 22, 2016. In the previous ten years, it was not.
Anyone who started using a Google Map on their website since June 22, 2016, will have to sign up to get an API key. Older users, however, can continue their maps without a key.
When site visitors see the message that Google Maps did not load correctly, they will not be able to use the map functionality. They may even wonder whether the website is outdated and whether the information is still correct. It is therefore very important to fix the Map issue. This guide will show how to fix the “This page can’t load Google Maps correctly” message on a WordPress website.
There is no clear technical reason for this. In the past, Google Maps used to work well. It was only a matter of using the embedded code and the map would appear without any difficulties. However, in 2016 Google decided to change its policies. They made it a requirement to use an associated API key for anyone who wants to use a Google Map on their website.
In 2018 Google Map made further demands on Google Map users. It is now a requirement if you are showing a map on another website, you need to set up a Google Maps API.
API is an acronym for Application Programming Interface. It allows Google to see how its software is being used on other websites and it can stop any malicious use of any of its associated components.
If an API key was already added, then use the Inspect Element functionality of Google Chrome. To do this go to Inspect Element in Chrome, and then to the Console tab. It could indicate that the key is not correct, or that the key is restricted.
Setting up an API key is not very straightforward, especially for users with little experience. Google Maps has designed the process in such a way that it is more friendly for developers and web designers. Since WordPress is the most popular CMS on the market, its users have very different experience levels, from expert to novice. This article will therefore show how to do it for a WordPress website.
Anyone with a WordPress website that incorporates standard WordPress Google Maps elements, is in danger of showing the “This page can’t load Google Maps correctly” message instead.
As mentioned, since June 11, 2018, the Google API key and Google Cloud Platform billing account are mandatory. This means that anyone starting to use the service after June 22, 2016, needs to sign up for these services. If the maps were in use before this date, nothing changes and an API key is not yet needed.
Even though the key is also used for billing purposes, its use may still be free. Google allows 28,000 dynamic map loads per month for free. For static maps, this number is as high as 100,000. Owners of high-traffic sites can find prices on this website.
The first step in solving the problem is creating a Google Maps API key. Here is how to do this:
The second step is to add the obtained Google Maps API. Here is how to do that:
Now, with the API key entered, the long number that we obtained in the steps above, the way is free to create and embed maps. However, there are some recommendations regarding security.
If the ¨This page can’t load Google Maps correctly” error persists after following the steps above, here are some additional options.
It is worthwhile to update and review the status of the Google Maps APIs that are in use on a website, including WordPress sites. Visitors are sure to prefer a properly loading map, instead of “this page can’t load Google Maps correctly”. It will enhance the user experience of any prospective customer.
Any visitor that encounters that message on a website should notify the website owner of this issue. If it is a website that welcomes many visitors each day it could also be that the limit of free loads has been reached. The owner of such a website should investigate changing his plan, for example to Premium. This is particularly true when maps are used on the website.
We also wrote about a few related subjects like how to measure distance on Google Maps, how to drop a pin in Google Maps, what is a vector map, interactive maps, the choropleth map and how to make one, thematic map examples, how to find elevation on Google Maps and statistical maps.
I take it you like maps as well so make sure to check out MapSVG, a great WordPress maps plugin you should check out.