Help! My Google Maps is broken.

]

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]