How to Fix This Page Can’t Load Google Maps Correctly

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.

What Is the Reason for This Message?

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.

Add Google API Key into your site settings

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.

Creating a Google Maps API Key

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:

  • Go to Plugin settings. This can differ per user, but it should have the option of adding an API key. If this option does not appear, this probably means that the plugin is old or outdated.
  • Go to Google’s Cloud Resource Manager
  • Sign in if requested.
  • Choose Create a new project.
  • Enter a suitable name.
  • Click Next. It will now redirect to the Set Up Google Cloud Platform.
  • Enter any payment information that is required. Users of YouTube Red or the app store that have previously entered payment detail will not have to do so again.
  • When all the information is entered the system will generate an API key.

Adding the Google Maps API

The second step is to add the obtained Google Maps API. Here is how to do that:

  1. Open the WordPress theme options.
  2. Locate the API integrations.
  3. Enter the API key.
  4. (Add missing Analytics ID now that you are here)
  5. Click Save changes.

Google Maps API Security

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.

  • While in the API integrations environment, click the link To improve your app’s security, restrict this key’s usage in the API console.
  • Go to the Application Restriction tab.
  • Choose HTTP referrers (websites) under Application Restriction.
  • Add the entries that are shown below. Replace your website with the correct URL. Do not forget to use the asterisk (*) and http:// or https:// where applicable.
  • www.yourwebsite.com*
  • *yourwebsite.com/*
  • yourwebsite.com/*
  • *.yourwebsite.com/*
  • Click Save.

Still Having Problems?

If the ¨This page can’t load Google Maps correctly” error persists after following the steps above, here are some additional options.

  • The caching of today’s browser can be an issue here. Wait five to ten minutes and recheck the console.
  • A second option could be that there were two errors in the first place and only one of them was resolved. Refer to the information above to resolve other potential mistakes.
  • Clear browser cache.
  • Clean the reserve of any storing modules.

Ending thoughts on “this page can’t load Google Maps correctly

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.

The Google Cloud support page has much more interesting and useful information on how to use Cloud APIs. The performance of a Google Maps API is dependent on many factors. These include billing, service usage, and terms of use. All these factors should be taken into account when using the service optimally.

If you liked this article about this page can’t load google maps correctly, you should also check out this article with map illustration examples and types of maps.

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 mapinteractive maps, the choropleth map and how to make onethematic 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.