Help! My Google Maps is broken.

By Steve LawNovember 2, 2018

]

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.[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_equal="on" module_class_1="ds-vertical-align" module_class_2="ds-vertical-align" _builder_version="3.22.3"][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_image src="https://missionbell.net/wp-content/uploads/2018/11/Search-Google.jpg" show_in_lightbox="on" _builder_version="3.22.4" box_shadow_style="preset1"][/et_pb_image][/et_pb_column][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_text _builder_version="3.17.3"]

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.  https://developers.google.com/maps/documentation/javascript/get-api-key

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

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_equal="on" module_class_1="ds-vertical-align" module_class_2="ds-vertical-align" _builder_version="3.22.3"][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_image src="https://missionbell.net/wp-content/uploads/2018/11/Get-Strated-with-API-Key.jpg" alt="Get Started with Google Maps API" show_in_lightbox="on" _builder_version="3.22.4" box_shadow_style="preset1"][/et_pb_image][/et_pb_column][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_text _builder_version="3.17.3"]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_equal="on" module_class_1="ds-vertical-align" module_class_2="ds-vertical-align" _builder_version="3.22.3"][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_image src="https://missionbell.net/wp-content/uploads/2018/11/Enable-Google-Maps-Platform.jpg" alt="Enable Google Maps Platform" show_in_lightbox="on" _builder_version="3.22.4" box_shadow_style="preset1"][/et_pb_image][/et_pb_column][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_text _builder_version="3.17.3"]

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

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_equal="on" module_class_1="ds-vertical-align" module_class_2="ds-vertical-align" _builder_version="3.22.3"][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_image src="https://missionbell.net/wp-content/uploads/2018/11/Select-a-Project.jpg" alt="Select a Project for Google Maps" show_in_lightbox="on" _builder_version="3.22.4" box_shadow_style="preset1"][/et_pb_image][/et_pb_column][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_text _builder_version="3.17.3"]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_equal="on" module_class_1="ds-vertical-align" module_class_2="ds-vertical-align" _builder_version="3.22.3"][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_image src="https://missionbell.net/wp-content/uploads/2018/11/Enable-Billing.jpg" alt="Enable Billing for Google Maps" show_in_lightbox="on" _builder_version="3.22.4" box_shadow_style="preset1"][/et_pb_image][/et_pb_column][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_text _builder_version="3.17.3"]

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".

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_equal="on" module_class_1="ds-vertical-align" module_class_2="ds-vertical-align" _builder_version="3.22.3"][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_image src="https://missionbell.net/wp-content/uploads/2018/11/Select-Country.jpg" alt="Select your billing country" show_in_lightbox="on" _builder_version="3.22.4" box_shadow_style="preset1"][/et_pb_image][/et_pb_column][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_text _builder_version="3.17.3"]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_equal="on" module_class_1="ds-vertical-align" module_class_2="ds-vertical-align" _builder_version="3.22.3"][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_image src="https://missionbell.net/wp-content/uploads/2018/11/Enter-Your-Business-and-BIlling-Info.jpg" alt="Enter your business and billing info" show_in_lightbox="on" _builder_version="3.22.4" box_shadow_style="preset1"][/et_pb_image][/et_pb_column][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_text _builder_version="3.17.3"]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_equal="on" module_class_1="ds-vertical-align" module_class_2="ds-vertical-align" _builder_version="3.22.3"][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_image src="https://missionbell.net/wp-content/uploads/2018/11/API-Enabled.jpg" alt="APIs enabled" show_in_lightbox="on" _builder_version="3.22.4" box_shadow_style="preset1"][/et_pb_image][/et_pb_column][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_text _builder_version="3.17.3"]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_equal="on" module_class_1="ds-vertical-align" module_class_2="ds-vertical-align" _builder_version="3.22.3"][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_image src="https://missionbell.net/wp-content/uploads/2018/11/Get-your-API-Key.jpg" alt="APIs enabled" show_in_lightbox="on" _builder_version="3.22.4" box_shadow_style="preset1"][/et_pb_image][/et_pb_column][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_text _builder_version="3.17.3"]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_equal="on" module_class_1="ds-vertical-align" module_class_2="ds-vertical-align" _builder_version="3.22.3"][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_image src="https://missionbell.net/wp-content/uploads/2018/11/API-Dashboard.jpg" alt="APIs enabled" title_text="Google API Dashboard" show_in_lightbox="on" _builder_version="3.22.4" box_shadow_style="preset1"][/et_pb_image][/et_pb_column][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_text _builder_version="3.17.3"]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_equal="on" module_class_1="ds-vertical-align" module_class_2="ds-vertical-align" _builder_version="3.22.3"][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_image src="https://missionbell.net/wp-content/uploads/2018/11/secure-your-api-key.jpg" alt="APIs enabled" title_text="Google API Dashboard" show_in_lightbox="on" _builder_version="3.22.4" box_shadow_style="preset1"][/et_pb_image][/et_pb_column][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_text _builder_version="3.17.3"]

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://*.yourdomain.com (http://*.yourdomain.com 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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_equal="on" module_class_1="ds-vertical-align" module_class_2="ds-vertical-align" _builder_version="3.22.3"][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_image src="https://missionbell.net/wp-content/uploads/2019/04/APIRestrictions.jpg" alt="APIs enabled" title_text="Google API Dashboard" show_in_lightbox="on" _builder_version="3.22.4" box_shadow_style="preset1"][/et_pb_image][/et_pb_column][et_pb_column type="1_2" _builder_version="3.17.3"][et_pb_text _builder_version="3.22.4"]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version="3.22.3"][et_pb_column type="4_4" _builder_version="3.17.3"][et_pb_text _builder_version="3.17.3"]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

Need Help?

At Mission Bell Communications we help add value to small to medium sized businesses by providing digital services at a price point you can afford.  If you are interested in any of the subject matter in this blog, please fee free to get in touch with us for a no-obligation quote.
Get A Quote
Mission Bell Communications
5.0
Based on 19 reviews
powered by Google
Ryan McDougall
Ryan McDougall
18:45 04 May 20
Steve helped our business at a very critical time while pivoting to e-commerce in the midst of the COVID 19 crisis and... it was seamless and we are now able to continue to do business. Very impressed.read more
Fons Van Geleen
Fons Van Geleen
16:17 12 Dec 19
Steve has helped me setting up a great website for my organization. Being a newbie in Canada i 'm busy with a lot of... stuff and the website had never been live without the help of Mission Bell Communications. Thankyou very much Steve!read more
Debra Signorello
Debra Signorello
14:28 23 Oct 19
Great job on my website. I enjoyed working with youTurned out excellent. Thank you. Rich
Bob Rohfritsch
Bob Rohfritsch
13:16 18 Sep 19
Steve has done an awesome job on my website.I needed his experience to do what I am not into and he took the... information I gave him and ran with it.Great job!Very professional website!Thanks Steve.Bobread more
Michael O'Callaghan
Michael O'Callaghan
23:54 25 Mar 19
"Steve has extraordinary vision, experience, and most of all... he is delightful to work with. Mission Bell exceeded... expectations- met every deadline, and were extremely flexible. His professionalism, integrity and the ability to translate & implement our ideas to help re-brand & deliver our product to marketplace was an awesome experience. Steve & the resources Mission Bell Communications bring to the table are truly WORLD CLASS." - Highly Recommended on all fronts! - Mike O.read more
Tristin Burns
Tristin Burns
05:06 04 Dec 18
Fantastic work! Professional, experienced, fast and reliable. Mission Bell did a fabulous job on my site. Incredibly... personable and patient. Everything you want when going through the process of re-branding and creating a new site.read more
Next Reviews

Mission Bell Communications Inc.
A-44 Frederick St.
Stratford, ON N5A 3V4
Canada
+1 (226) 921-5070

©2020 Mission Bell Communications Inc.  All Rights Reserved

Topphonefacebookenvelope
WP Feedback

Dive straight into the feedback!
Login below and you can start commenting using your own user instantly