website maps error

7 Steps to Fix “This Page Can’t Load Google Maps Correctly”

Share on facebook
Share on twitter
Share on email

If your business has a website you likely have a Google Maps element on your front page or contact us page. If it is showing the error message “This page can’t load Google Maps correctly Do you own this website?” there is an error with your Google API. This error disables the map functionality making it useless for visitors. It also leads customers to question what else is outdated on your site. It is important to fix this error from a usability and trust standpoint.

This guide will walk you through common causes of this error and how to fix them. Or, our expert team of web designers can quickly solve this problem for you or any other website updates. Contact us today.

google maps error showing this page can't load google maps correctly

What Causes the “This Page Can’t Load Google Maps Correctly” Error

In 2016, Google restricted use of its Google Maps platform. Prior to this any website could copy a simple code and have a great looking map on their site. In 2018, Google further restricted access. Now, in 2020, you need to set up a Google Maps API to show Google Maps on your website. API stands for Application Programing Interface. By now using an API to show Maps on your site, Google has a better idea of how its software is being used and is better able to prevent malicious use of Google Maps.

Follow the next 8 steps to create your Google Maps API and fix the issue on your website.

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

Create a free Google Maps API Key

  1. Log into the Google Cloud Platform Console with your Google account. If you don’t have an account, you can create a free account.
  2. Create a New Project. Name this project after your website.
  3. Select the API you need and then click enable. This will depend on the type of map you have on your site. For example, if your map is embedded without a plugin, pick the Google Maps Embed API. If you are using a third party plugin, their documentation should tell you what type of API key you need.
  4. Select billing and create a billing account. You’ll be required to enter a credit card on this screen. Unless you go over around 20,000 pageviews a month, your card will never be charged.
  5. Select OAuth consent screen and follow the on screen directions. For User Type select External.
  6. Select Credentials and you will see your API key. Click to create an Application restriction. Choose HTTP referrers (web sites) and insert your website’s URL in the box e.g. https://*.yourdomain.com/* This will prevent someone from using your API on their website and potentially costing you money.
  7. How you use your new Google Maps API depends on how your map is embedded on your site. If you are using a WordPress plugin, open the plugin ad find the section that asks for your API key and paste it there. Site builders like Wix, GoDaddy or SquareSpace will have their own way of accepting the API Key
google maps loaded with correct api on site fix forthis page can't load google maps correctly

Next Steps

Your site is now displaying your location correctly. I hope this tutorial was helpful in explaining the steps needed to fix this issue on your website. If you need help implementing these steps, please reach out to us for a quote.

Share on facebook
Facebook
Share on twitter
Twitter
Share on email
Email

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Articles