If your website is using Google Maps and was built before July 2018, you may be seeing an error on top of your map that says “This page can’t load Google Maps correctly.” It will also have a watermark on the map that says “For development purposes only.”
I’m going to explain how to fix the error and how to avoid the error if you are building a new website.
In July 2018 Google’s policy changed, requiring a billing account to be set up in order to use Google Maps. (Side note, keeping on top of issues like this is a good example of why website maintenance is an important part of running a website.)
You can read Google’s documentation on using their MAP API services here:
https://developers.google.com/maps/documentation/javascript/usage-and-billing
Does this mean Google Maps is no longer free?
For most users, using Google Maps on your site will still be free.
This is how it works.
Each month Google gives you a $200 credit towards using the map services.
This allots you 500,000 map views ( i.e. web page views that has the map on it).
For most small business websites you are never going to get anywhere near 500,000 views in a month. (The number of views and the $200 credit renews each month).
Google tracks how much your website is using the map by connecting it to a unique identifier called an API key. It looks something like this:
A42zaSyA8xEY5vQOkmtzUbSCmlyUABWXnCg0EmTf
It’s important when you create your API key that you associate it with your domain only. It’s easy for anyone to view your source code in your browser to be able to see your API key. If you don’t connect it to your domain only, it can be stolen and used on another website. (Potentially then hitting the monthly limit and charge YOU.)
How do I get a Google Map API key?
Google’s documentation is pretty straight forward to walk you through how to set up billing first and then generate an API key.
Click on the images below to access the documentation.
How to Restrict API Keys
To protect your API Key from being used maliciously, you want to restrict it.
On the application level (for a website) – restrict it by HTTP referrers.
Enter your domain name in this format: ( “star” “dot” “domain name”)
*.freelancewebprogrammer.com
This will allow all variations of your domain name to use it.
For API Restrictions, click restrict key and select Maps JavaScript API from the dropdown.
Can you set up the API key for me?
When I am building your website, or you hire me to fix website errors like this, I need you to set up a Google Map API key in your Google account and send the generated API key to me to then incorporate into your code.
Still, I have people ask me if I will just do it for them through my account. Sorry, no. This key is connected to a Google Account and billing information.
Even though you may never hit the limits, you never know when Google will change their policy again and begin charging for the service. I do not want any billable service tied directly to my Google account that is associated with a client.
