How to add Google Maps API key (from google console)

Storemapper works with the Google Maps Platform  to ensure your customers get the best possible map experience. Because that map is on your website, publicly available, and your customer uses it freely, you’ll have to have your own relationship with mapping provider (Google in this case) . This involves the creation of an account with them and generating API key or token that is linked to your map and site.

If you want to learn more about how Storemapper is using Google Maps Platform and why you need to register your map with Google, please navigate to Your store locator Google Maps License explained.

If you don’t feel comfortable following these steps, we now support an alternative map provider that has much simplier key set up process and doesn’t require you to set up billing. Proceed with Add Mapbox token to your account  article.

Add API key from Google Console

Step 1: Ensure you’re logged into your Google Account. If you don’t have one, you’ll have to create it first.

Step 2: Navigate to Google API dashboard

Step 3: Click on ‘Select a project’ and choose ‘NEW PROJECT’.

Give the project some reasonable name, like ‘Storemapper locator’

Step 4: Now we need to enable APIs required for Storemapper. Click on ‘ENABLE APIS AND SERVICES’.

You’ll need the following APIs: Google Maps JavaScript API, Places API, Geocoding API.  Let’s add them in order.

Google Maps JavaScript API – in the search field type ‘Maps JavaScript API’ and click on it.

Press ‘ENABLE’ in the opened window

You’ll be navigated to the added API dashboard. Go back to the list of APIs to continue enabling them.

Places API in the list of ‘Additional APIs’ find ‘Places API’ and click on it.

In the opened window click ‘ENABLE’

Go back to the list of APIs to continue enabling them.

Geocoding API in the list of ‘Additional APIs’ find ‘Places API’ and click on it.

Step 5. Now we need to create API key. Navigate to Credentials tab and click  ‘Create credentials’ button.

 

.

Choose ‘API Key’ in the drop-down list.

Copy the newly created key and save it somewhere, as we’re going to add it to your Storemapper account later. Meanwhile, click to ‘RESTRICT KEY’

 

Step 6: Add HTTP restrictions. This is to limit your API key to just your site. 

In the Application restrictions section choose ‘HTTP referrers’ and add the following items into Website restrictions. Make sure to copy the asterisks and slashes exactly. If you have multiple domains, add them the same way with commas in between.

*storemapper.co/*

*yourwebsite.com/*

Step 7: Add API restrictions. Starting from August 30, 2019 Google will require all API keys to have API restrictions in place. 

In API restrictions section choose ‘Restrict key’  and click on ‘Select APIs’ dropdown.

In the APIs list select ‘Maps JavaScript API’, ‘Places API’, ‘Geocoding API’

 

Add Billing account

If you don’t want to share your billing details with Google you can use alternative mapping provider then. Please procede with How to add Mapbox token to your account article

Step 8: Navigate here and press ‘Add Billing Account‘.

Step 9: In the opened form enter your business information and add a payment card to your account.

Step 10: Navigate to Billing section of your project and click on ‘Link a billing account’

Step 11: Ensure you choose earlier created billing account and press ‘SET ACCOUNT

You’re done! Now get API key you saved previously and paste it to your Storemapper account here.

 

Was this article helpful?

Related Articles