This task can be undertaken by users with the following roles: OC Site Manager and OC System Administrator.
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 will need to have a Google Cloud Console account. If you have already set up a Google account that you use 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 to use for Google Cloud Console.
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.
Get Started with Google Cloud Console
After you have created a Google account and signed in, go to the Google Cloud Console homepage. If this is the first time using Google Cloud Console, you will be taken to a page where Google will offer you a free trial.
For your free trial, you will have $300 worth of credit for the first 3 months. After this initial period, Google will give you $200 worth of credit a month. To access this credit, you will need to add a credit card to your billing account, which will only be charged if your API calls exceed the credit of $200 per month. Google's pricing guide can provide some more information on usage costs.
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.
When you're ready to start your trial:
- Select Try For Free on the Google Cloud Console homepage.
- Enter the details of your organization in the provided fields.
- Enter your credit card details in the provided fields.
- Click Done.
Once you have signed up, you are ready to start creating a new project.
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.
- Go to the dropdown 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 that allow you to utilize the different functions of Google Maps.
Enable Google Maps APIs
There are 4 APIs that will enable you to use the features of Google Maps on your own 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 3 APIs:
-
- Geocoding API
- Places API
- Distance Matrix API
After these APIs have been enabled, you will need to generate an API key for your OpenCities site.
Generate an API Key for OpenCities
In order for your maps to correctly display on your OpenCities site, you'll need to generate an API key to add to your OpenCities 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 OpenCities 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 OpenCities site. You can do this from Google Cloud Console.
Authorize your API key for Use on OpenCities
API key restrictions allow you to dictate which sites can use this API key. To do this, go back 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: 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.