Have you recently looked for the address of a new restaurant or shop only to find a Google Maps error on the contact page of its website?
“This page can’t load Google Maps correctly.”
Major bummer! Google has just become a barrier between you and those extra tasty burritos you’ve been hearing so much about.
More importantly, if you’re the business owner of said burrito shop, this problem affects you, too. But don’t sweat it! We can fix it together.
Why Is This Happening?
The Google Maps Platform last year 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.
Right now you’re probably thinking, “Isn’t it free to embed a Google Map on my website?” It is… kind of. Although this rule change impacts all websites, Google is still basically offering the use of its maps for free to the majority of business owners. So why the policy change?
Some 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 $300 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 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.
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 (like you set up for Google Analytics), 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 shiny new API key (that long number in the box up there), 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.
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. In layman’s terms, you must not stand between your potential customers and their extra tasty burritos!
If you would like assistance with registering for an API key or fixing a Google Maps error on your website, give us a call. But please, don’t email us your API key! Like a password, the API will be visible to snoopers as it transmits via email. And that’s another subject for another day.