Thursday, December 10, 2020

This page can't load Google Maps correctly.

The website looks great, but the Google Map can't load correctly.  What in the world is going on with the Google Maps API Console?

This page can't load Google Maps correctly.

This page can't load Google Maps correctly (L: before and R: after)

If you get this message: This page can't load Google Maps correctly.  Don't worry, there's only a little fine-tuning necessary to get your website map to work.  Here are a few things you can do to fix your Google Maps API before you lose your mind.  

Note: You'll need to log in to your Google Account and access your API console (APIs & Services or Billing) to get started.

1.  Has your domain been verified with Domain verification?

Make sure you've used added and verified the domain.  This might be adding a TXT record to the domain DNS or possibly adding a CNAME to verify the domain.

Google Search Console Domain Verification

Google Search Console Domain Verification

2.  Check your Credentials

If you've not added your domain, your Google Maps API key will display your map with a gray overlay that says "This page can't load Google Maps correctly."  Also, make sure you press "Save" after adding your domain.

3. Is the Google Maps API Key included in your website's code?

This essentially links everything together so the map will display on your website. "The API key is a unique identifier that authenticates requests associated with your project for usage and billing purposes. You must have at least one API key associated with your project." And, "You must include an API key with every Maps JavaScript API request."

4. Did you add a billing method?

Although your credit card won't be billed (price starting at 0.017 USD per session) Basic Data (billed at 0.00 USD) unless you exceed 1,000 requests/uses of the API on your website.  Be sure to check the Google Maps Platform Pricing for the latest costs – otherwise, if you currently don't anticipate a heavy amount of traffic or even if you do, you can Create a Budget that enables you to track your actual spend against your planned spend.  Payment Overview is where you can add and manage your Google Maps API payment methods.

If you've done all that, your Google map should look like the right side of this image without the gray overlay and "Do you own this website?" statement.  If not, you'll want to get in touch with a website developer experienced in navigating the Google Cloud Console and Google Maps Platform.

Google Maps helps you give users the context they need with static or interactive maps embedded into your site.  At Oevae Marketing Consultants, we make it easier to find your business.  Our Google Local Guides can add or edit missing places on Google Maps, where millions of people rely on to decide where to go and what to do – Accurate information builds customer trust and reliability toward a business.

If you need help, contact us at 972.850.8823

Make a brand difference.™