Have you gone to a businesses website to find directions, click on their directions or map link and get “This page can’t load Google Maps correctly.” message on their site? No fun for you and they’re losing business! Yikes!
If you’re the owner of a website that has this issue, read on. I’ve got a solution for you!
When your map says “this page can’t load Google Maps correctly” Why Is This Happening?
Last year The Google Maps Platform changed its rules—and pricing model—for websites with embedded maps. Instead of just copying an embed code and pasting it into the source code of a web page, website owners are now required to use an API key to properly display a Google Map.
As of 06/2018 Google Maps “projects” must now be associated with a billing account. If you are a small business, you probably won’t actually incur charges because Google provides a complimentary $200 monthly credit for each Maps project. View the Google Maps pricing sheet to determine the potential costs for your company.
Some larger company websites using the Google Maps Platform rack up over 100,000 map views on their site in a month. The new model helps Google get paid for high-volume users (and abusers) of the API, while keeping the free service free for the little guy. When you sign up, you get a $200 credit to use for the first year and $200 of free usage per month. Most small business websites will never reach the limit that triggers billing. However, the largest map users now receive a bill of $1.60 for every thousand hits per month over the 100,000 limit.
Step-by-Step Instructions how to Fix the Google Maps Error
When you view the map page of a site NOT using an API key, you’ll likely see a Google Maps error that looks like this. A white pop-up box will display the error over a grayed over map reading “For development purposes only.”
The link in the error box will take you where you need to go to fix your map. You can also visit the Google Maps Platform to begin.
Once you are there, click “Get Started” in the top right corner. A pop-up will ask how you want to use the Google Maps Platform.
Steps to Get Started:
- Pick a product
- Select a project
- Set up your billing
Then, select or create a project on the next screen. For a typical website, it doesn’t matter what name you give this project. (Enterprise-level customers using multiple Google Platform products probably aren’t reading this tutorial!)
Next, you’ll have to enable billing for the project. As explained above, it is highly unlikely that you’ll ever have to pay any money if your map is embedded in your small business website. If your site receives lots of map views, you should budget for that use and write the Google Maps API fees into your business model.
Enable billing by creating a billing account.
If you already have a Google billing account to pay for YouTube Red or to buy apps in the app store, you won’t have to enter any credit card information. If this is a newly created Google account for your business then you’ll have to supply payment information. After you’ve completed these steps, you’ll receive your API key.
Keep Your Google Maps API Secure
At this point, you could be ready to create maps with your new API key, but we recommend one more step for better security.
Click that link at the end that says “To improve your app’s security, restrict this key’s usage in the API Console.” Navigate to your API settings and look for the Application Restrictions tab.
- Click the “HTTP referrers” button. This will tell Google to only allow your API to be used on a specific website.
- In the blank field below, type in your website URL, adding * in the correct places (i.e., https://*.ltnow.com/*).
- Note that we’ve entered ‘https’ because our website, LTnow.com, is hosted via HTTPS. If your site isn’t secure, it won’t use HTTPS. Use HTTP instead.
- Once you click the “Save” button, your API is secured.
So is it Worth It?
Yes! If your website relies heavily on maps, it’s definitely worth your time and effort to update the Google Maps API. Your site visitors want a map that loads properly, and you want to provide a good user experience. Make it easy for customers to find your business.
So how is your website doing?
COOL FINDS FROM AROUND THE WEB . . .
Establishing Effective Workflows to Balance Life and a Thriving Business
Building for Accessibility: Make Sure Everyone Can Use Your Store