Over the past few months I’ve seen this Google Maps error popping up on sites across the web. It basically puts on overlay on your map that says “For development purposes only” and prevents any use of the map. For some businesses this is trivial, but for those whose sites rely on this functionality, which is the case for a store locator in this example, it can be a huge problem. Either way, in this short tutorial I’m going to show you how quick-and-easy it is to actually fix this error and get your Google Map up-and-running in no time.
Diagnosing the Error Message
The error message actually gives you two options:
- Do you own this website?
Clicking the button labeled “OK”, just closes the popup, but doesn’t do anything to help you get rid of the error message overlay. So what you want to do is click on the link “Do you own this website”. This will open a new tab and take you to the Google Maps API documentation on errors which is actually really good.
This page walks you through diagnosing the issue which essentially comes down to the fact that you now need to use an API key in order for your Google Map to function. Gone are the good ol’ days when Google Maps was free to use anywhere. Yes, that’s right, Google is now going to charge for using their Maps API. And honestly, they should! It’s a great service that they are providing to us and unless your site is getting tons of traffic, you’re probably not going to be charged anything. The Google Maps pricing page states that use of the platform costs only $2-14 per 1,000 requests, plus you get a free $200 credit per month.
Obtaining an API Key
If you answered “No, I’m not using an API key” on the documentation page mentioned earlier, then you’ll be taken over to Google Cloud Console. If you don’t have an account, you can set one up quickly with your existing Google account. You’ll also need to create a project if one doesn’t already exist for the site you’re working on.
- Once you’ve created a Project, make sure it’s selected on the dropdown menu at the top of the page, then select APIs from the menu on the left.
- After it’s been enabled, you’ll need to click on Credentials. Here you’ll be able to generate the API key you’ll need for your map.
- Lastly, paste your API key into the script on your site as seen below.
<script async defer src='https://maps.googleapis.com/maps/api/js?key=YOURAPIKEYGOESHERE&callback=initMap'> </script>
OPTIONAL: I’d recommend setting up restrictions on the key which allows you the option of using it with specific URLs or apps, which you can do by clicking on the API key.
At this point, if you’re still getting the error on your map, you’ll need to set up a billing account.
Setting Up a Billing Account
As I mentioned before, Google Maps is no longer free and for this reason you have to have a billing account associated with each project. But don’t worry, as I mentioned above, the cost is minimal for most sites, in fact, there is a free $200 credit which is good for up to 100,000 requests. So, unless you’ve got tons of traffic to your site, you won’t actually have to pay anything, although you’ll still need to have a card on file.
You can find a link to the Billing page by clicking the menu icon in the top, left corner of the page. A menu will slide out from the left and you will find an option for Billing. Once there you will enter your payment details so Google has them on file and the dreaded Google Maps Error will be vanquished to oblivion for all eternity!
Need More Help?
If all this seems like too much trouble, I’d be happy to help get this resolved for you. At Concierge Web Company we take care of these sorts of things for our clients so that they can spend their time running their business and serving their customers. Book a free consultation today to see how we can help!