This task is for users with the OC Site Manager or OC System Administrator roles.
Several of our content types have location fields that, when published, generate a map to show where an event, venue, or park (to take only a few examples) is located. The base layer of these maps is sourced from Google Maps, so before you can start presenting maps on your site, you need to create an API key for your project and add it to your site's Location settings.
To do this, you must have a Google Cloud Console account. If you have already set up a Google account for other Google products, such as Gmail or Google Analytics, we recommend using the same email address to set up your Google Cloud Console account so you can keep all your keys and credentials in one centralized place. If you do not, you can easily set up a Gmail account for Google Cloud Console.
Please note that Granicus will not have access to sensitive data connected with your Google Console account after you set up Google Maps. Your website will only transfer Insights data if you have connected to Google Analytics.
There's a lot to cover for this topic, but these are the main points:
If you need more help using the Google Cloud Console, visit the Google Cloud Console support center.
You can also follow along with this video to learn how to connect to Google Maps and enable your APIs.
Get Started With Google Cloud Console
Google recently made changes to the Google Maps Platform, including changes to the pricing model and billing structure. These changes became effective on March 1st, 2025, and you can read about them on this frequently asked questions page.
After you have created a Google account and signed in, go to the Google Cloud Console homepage. If this is your first time using Google Cloud Console, you must add a credit card to your billing account. Your card will be charged if your API calls exceed the usage cap. Google's pricing guide can provide some more information on usage costs.
Once you have signed up, you are ready to start creating a new project.
You may also want to add Cloud Billing budgets and budget alerts to ensure you're informed about your expenses. Setting a budget will not automatically stop usage if you exceed it, but setting up a notification can help you control your costs.
Create a New Project
Google Maps uses projects to enable you to set up API keys for each site you're working on. Each project allows you to generate API keys or other credentials to use Google products with your website, such as using Google maps on your site. You may already have a project for an existing website, but we recommend creating a project for any new websites and naming it something descriptive, such as "Council Website Map API Keys."
- Go to the drop-down menu at the top of the screen labeled My First Project.
- Select New Project.
- Give your project a name and select Create.
- If successful, you will see a success message in your notifications where you can choose Select Project to start working on it.
After creating your project, you'll need to enable the necessary APIs to utilize the different functions of Google Maps.
Enable Google Maps APIs
There are four APIs that will enable you to use the features of Google Maps on your site.
- From the top-left navigation menu, go to APIs & Services and then select Library.
- The first API we need is the Maps JavaScript API. If it is available under Maps then select it, if not then use the search bar to find it.
- Once you have found and selected it, click Enable. You will get a success message.
- Follow steps 1-3 to enable the other 4 APIs:
- Geocoding API
- Places API
- Distance Matrix API
- Maps Embed API
After these APIs have been enabled, you will need to generate an API key for your website.
Generate an API Key for this Website
In order for your maps to correctly display on your website, you'll need to generate an API key to add to your CMS location settings.
- From the top-left navigation menu, go to APIs & Services, then select Credentials.
- Go to Create Credentials and select API key.
- Use the copy icon to the right of your API key to copy the key.
- Go to your site admin and, from the main menu, go to More > Site Management > your site > Settings.
- Select Location.
- Paste the API key into the Google map api key field.
- Click Save Settings and then Save.
After pasting the API key into the Location settings, the key will take around 5 minutes to activate.
Now, you'll need to restrict the API key to only work for your council website. You can do this from Google Cloud Console.
Authorize Your API Key for Use
API key restrictions allow you to dictate which sites can use this API key. To do this, return to your Google Cloud Console window where you copied the API Key to Restrict your key.
- In Google Cloud Console, select Restrict Key. This will take you to a screen where you can edit your API key.
- Give your key a descriptive name, indicating the site(s) it is being used on.
- From the options under Application restrictions, select HTTP referrers (web sites).
- Scroll down and under Website restrictions, select Add An Item.
- Paste the URL of each website into the Referrer field which appears, adding wildcards as you need to.
- Select Done to add the URL, and follow steps 4-5 to add any additional URLs.
- Scroll to the bottom and select Save.
- Test your API key is working by going to a page on the site added in the website restriction list that has a map.
If you're confused about which URLs to add to your Referrer field, visit this article or use the following information to guide you:
|
If you need to add sites with unique URLs:
|
Add them to the Referrer field in this format:
|
|
If you have a public site with subdomains you can list them with one wildcard URL:
|
Add it to the Referrer field in this format:
Note: This is the best URL to use if you are connecting your prelive site. Adding one wildcard URL ensures that your maps will continue to display after site launch. You can also list the URLs individually if you need to |
Please note that maps will only appear before launch if you add your prelive URL. When you go live, go back to edit the API key and add the live URL to the list of sites that can use it.
Troubleshooting Tips
There are a few common errors we've seen people run into when using Google Maps. This video will take you through how to fix them.