“This page can’t load Google Maps correctly.” is a recent Google Maps error message that may have come up on your website’s maps recently. In the background, a grey map shows with the words “For development purposes only” repeating across the map. This error is due to a recent change to the Google Maps API but good news! We can fix it together!
Sites getting this error are using the Google Maps API, which has undergone a change of rules. These rules mainly affect people getting a bill for using the maps API too much. Most local small business websites will never reach the limit that triggers a billing. For the majority of website owners, Google is still basically offering the use of their maps for free. When you sign up, you get a $300 credit to use for the first year AND $200 of free usage per month. That pricing is in effect for the largest map users. In other words, you’ll have to rack up over 100,000 views of your contact page in a month before you are billed the $1.60 for every thousand hits over 100,000. This model helps Google get paid for abusers of the API and high-volume users, but keeps the free service free for the little guy.
Step-by-Step Fix to the Google Maps Error
Once you are there, click “Get Started” in the top right corner. A pop-up will ask how you what you want to use the Google Maps Platform.
Next, you will select or create a project. For a typical website, it doesn’t matter what name you gave this project. If you are an enterprise-level customer using a lot of Google Platform products, I bet you aren’t reading this tutorial.
Next, you’ll have to enable billing for the project. Like I 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 is a heavy map user, you should budget for that use and have the Google Maps API fees written into your business model. Enable billing by creating a billing account.
If you already have a setup with Google to pay for YouTube Red or to buy apps in the app store, you won’t have to put in any credit card information. If this is a newly created Google account for your work (like you set up for Google Analytics) then you’ll have to put in credit card info.
Keep Your Google Maps API Secure
At this point, you could be done, but we want to do one more thing for better security. That long number up there is your API key. Call our office and read it off to us or if you are one of our secure file sharing clients, drop it to us in a secure folder. We don’t recommend emailing it because, like a password, the API will be visible to snoopers as it transmits via email.
Click that link at the end that says “To improve your app’s security, restrict this key’s usage in the API Console.”
You want to go into your API settings and look for the heading that says Key Restrictions.
Click the button that says “HTTP referrers.” This will tell Google to only allow your API to be used on a specific website.
On the blank area below, type in your website, adding * in the correct places (i.e., https://*.ltnow.com/*).
Note that above we put in ‘https’ because our website, LTnow.com is hosted via HTTPS. If your site isn’t secure, it won’t use HTTPS. Type HTTP instead.
Once you press the “Save” button below, your API is secured. Contact us with your API and we’ll put the code into your site.
If your website relies heavily on maps, it’s 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.
If you have questions about the Google Maps API or how to get Google Maps on your website, give us a call.