Create Google Maps API key

Misty Flowers

March 27, 2018 10:11

A Google Maps API key is required to display Google Maps on your Finalsite site using the Map element or Constituent Map element. Setup involves creating a project in the Google API Console, enabling the Maps Javascript, Maps Embed, and Geocoding APIs, generating a key, and adding HTTP referrer restrictions after your site goes live.

💡Quick answers

Where do you create a Google Maps API key? At the Google API Manager Console (console.developers.google.com/apis/library); log in with your Google account and create a project if you haven't already.
Which three APIs must be enabled for Google Maps to work on a Finalsite site? Maps Javascript API, Maps Embed API, and Geocoding API; enable all three from the Enable API and Services section.
Where do you paste the API key in Composer? In Domain Settings (three-dot menu next to the domain) > SEO tab > the Google Maps API key field.
Why should HTTP referrer restrictions be added after the site goes live? Referrer restrictions require your live domain URL; adding them during deployment won't work correctly. Return to the API Console after launch to add restrictions and secure the key.

You must have a Google account to generate a key for Google Maps Javascript API. Google Maps requires a special browser key to display Google Maps on your website. This article will show you how the process works.

⚠️ Important: Post-launch task

While you can generate a key at any time, adding HTTP referrer restrictions (Step 4) requires your live domain. If your site is still in the deployment phase, you must return to this process only once your site is live to ensure the maps function as expected.

Step 1. Log in to the Google API Manager Console

Use your Google account username and password, and log in here: https://console.developers.google.com/apis/library.

First Time Using the Google API Manager?
If this is your first time creating an API key, you will have to create a Project first.

Click on the Create project button.

Give your Project a name on the next window. Click the CREATE button at the bottom-left of the window.

Step 2: Enable API and services

Click on the Enable API and Services button on the API Manager menu.

Search for and enable the Maps Javascript API, Maps Embed API, and the Geocoding API.

Step 3: Generate API key

Click on APIs & Services on the left hand menu and choose Credentials.
choose API Key.

Step 4: Add restrictions to the API key

Select the name of the existing API key. The restrictions section will appear at the bottom of the page.
Choose the HTTP referrers option.
Add your site's URL in the field below and press "Save.
Copy the generated API key to your clipboard.

Return to your Finalsite site and paste the API Key here: Modules & Settings > Site Administration > Site Information > Google Maps.

You will want to include a starting address for your school or district so that Google Maps can display an address. The address on the maps
Click the Save Site Info button.