Help! My Google Maps is broken.

by | Nov 2, 2018 | Articles


What’s the Plan

In this post, I will walk you through setting up a Google developer account, including billing, and getting a Google Maps API Key for your website.  Once you have this setup, you can plug the key into your website and get Google maps up and running again, if it is not working for you.

Step 1: Search Google

Go ahead and search Google for “Get a google maps API key for my website”.  The top organic result will bring you to the correct page.  You could also just click on this link to get there.

If you’re not logged into your google account, you may need to do so in order to proceed.

Get Started with Google Maps API

Step 2: Get Started

You will come across this screen next.  There are a couple of warning boxes for people just like you wondering why their Google maps aren’t working.  Click on the blue GET STARTED button.

Enable Google Maps Platform

Step 3: Enable Google Maps

Next, you will need to enable which API(s) you need for your website.  The most common will be maps, but if you offer directions to your locations, you may need routes.  If you don’t need the API’s don’t enable them.  It will make your monthly credit go further

Select a Project for Google Maps

Step 4: Select A Project

Here you will select a project, or create one.  The default name of my project will give you issues, if you have multiple websites, and want to keep track of which key is for which site.  You can name them whatever you want, but I would recommend naming them after the website where the API key is to be used.

You’ll also need to agree to their terms of service.

Enable Billing for Google Maps

Step 5:  Enable Billing

Next, you will be prompted to select a billing account if you have one.  Otherwise, you will select “Create A New Billing Account”.

Select your billing country

Step 6:  Select Country

You’ll need to tell Google, in which country you would like to be billed.  You will again have to agree to the terms of service and let them know if you’d like to receive their partner emails.

Enter your business and billing info

Step 7:  Business and Billing Info

You’ll next select if this is for business or individual use.  In the case of a business, you will enter your business contact information and your credit card information here. 

APIs enabled

Step 8:  Confirmation

Once your billing information is confirmed, you will see a dialog box telling you that your API(s) have been enabled. There’s no action required here other than to click NEXT.

APIs enabled

Step 9: Get Your API Key

Now you will finally be given your API key.  If you know where to put it then do so now. If you’re not sure, then connect with the developer who built your website.

You can copy and paste it into an email or document. There is also a button to copy the code directly to your clipboard.

APIs enabled

Step 10: View Your API Dashboard

You’ll be taken to your API dashboard where you can view your usage stats.  The important thing here is the “SECURE CREDENTIALS” button in the upper right. Your API key can presently be used on any website, so it could potentially be stolen and used excessively at your expense.

APIs enabled

Step 11: Secure your API Key

Next you will want to restrict access to your API key.  When you go to the SECURE CREDENTIALS page, you can scroll down to the APPLICATION RESTRICTIONS section, and select HTTP References.  Under that you can enter your website’s domain, making it so that they key will only work on your site.

You’ll want to enter https://* (http://* if you do not have an SSL certificate on your site.  You can look at your website’s web address to see if it has the http or https protocol-enabled).  The * will allow for things like www. or other subdomains to still use the key.

APIs enabled

Step 12: API Restrictions

On the same page where we limit the domains, we’ll find the API restriction settings.  Select “Restrict key”  and click the checkbox for the following API keys.

  • Directions API
  • Distance API
  • Geocoding API
  • Maps Elevation API
  • Maps Javascript API

Hit save.

We hope you find this helpful in getting your Google Maps back up and running on your website.  Let us know in the comments if you run into any issues.

By Steve Law
Steve founded Mission Bell Communications in 2015. Before that Steve worked in the technology industry and also worked for a nonprofit organization in Mexico. Steve has always loved technology, and all things creative.