Google Maps

Adding Google Maps to your website allows you to help users navigate to events and services in your community with maps, routes and places. Learn more about the capabilities of the Google Maps Platform, as well as popular features and how to get started.

Using Google Maps with your website

In order to embed a Google Map on your i:Create website, you must have one of the following modules offered by GHD Digital. Maps appearing within these modules are automatically generated based on address data entered into the module.

You can also embed a Google Map to a content page on your website (instructions are provided below).

If you do not already have one of these modules, please contact your account executive or email us at productsupport@ghd.com to learn more about each module and find one that fits your needs for your mapping project.

Create your Google payment profile and Google Cloud billing account

Once you have determined how you would like to use Google Maps with your website, you will need to create a Google payment profile and billing account using a valid Gmail account. You may need to ask your IT department for an approved Gmail account and associated credit card.

You will need this Google Cloud billing account because:

  • This billing account pays for Google Cloud projects and Google Maps projects
  • A Google Maps project and its resources are always paid for by a single Google Cloud billing account
  • A Google Cloud billing account is linked to a Google payment profile

Follow the steps below to set up your payment profile, obtain the API key you need to use Google Maps and view billing reports associated with your account.

You can also visit Getting Started with Google Maps Platform for more information provided by Google.

Your Google payment profile stores information, such as:

  • The name, address and tax ID (when legally required) of the person responsible for the profile
  • Credit card, debit card, bank account and other payment methods you've used to purchase items from Google in the past
  • Receipts and information about past transactions
  • Subscriptions and recurring payments
  • Information on others you have invited to use your profile

You can create a payment profile, use other profiles you have been invited to, edit profile information or delete your profile.

Create a payment profile

  1. Visit Google's payments centre.
  2. Log in using your Google account's (or Gmail's) details.
  3. Select "Payment methods", then add your chosen payment method you would like to use to purchase through Google.

 Add a Payment Method

  1. Visit the Google Maps Platform. Log in with the same Google (or Gmail) account that you did earlier.
  2. Enable your Google Maps Platform's APIs by picking the products you wish to use with your mapping projects. 

Enable Google Maps Platform - Pick Your Product

3. Create and name your new project.

Enable Google Maps Platform - Select a Project 

4. Enable billing and view and agree to Google Cloud's terms of service.

Enable Billing Instructions 

5. Your payment profile should appear automatically since you are already logged in. Once you agree to the terms of service, you an "Enable Google Maps Platform" screen will appear. Select "Next".

Enable Google Maps Platform instructions 

6. An API key should pop up. If the API key does not immediately appear, you will need to manually create the key (instructions included below). You must have at least one API key associated with your project (for example, the "Places" API must have an API key to function).

An API key is a unique identifier that is used to authenticate requests associated with your project for usage and billing purposes.

7. Copy this API key and save it for reference.

If your API key did not appear in the previous step, follow the instructions below to retrieve your API key needed for your Google Maps project.

1. Visit the Google Cloud Platform Console.

2. Select or create your project from the drop-down menu presented.

Select Project Instructions

 

Select Project Screen

 

3. Select "APIs" on the left-hand menu.

4. Select "Maps Javascript API" in the API Library.

Maps Javascript API option

 

5. Select "Enable".

Enable API screen

 

6. Now that you have enabled the API, get the API key by selecting "Credentials" in the left-hand menu.

7. On the Credentials page, select "Create Credentials > API Key " (Google Maps and Places). The "API Key Created" dialog box should display your newly created API key. Do not place any restrictions on the key.

Learn more about using API keys with Places API.

8. Copy this API key and save it for reference.

Please copy and paste your API key, along with your name, your organization's name and some brief details about your mapping project to us at productsupport@ghd.com

We will update and configure the API key so that Google Maps can be used. We'll notify you when this is complete.

After API setup, you are now eligible for Google Maps Platform Billing's account credits and other trials and pricing options. Please ensure you read this information to understand how billing and credits work. 

You can manage your account's billing and set budgets in the Google Cloud Console.

View your billing report

Billing reports for the Google Maps platform are available in the Google Maps section of the Google Cloud Console. Select "Overview" in the left-hand menu and in the "Billing" card and select "Go to Maps billing report" to view reports.

Embed a Google Map on a content page

To embed a Google Map on a content page:

  1. In Google Maps, enter the location you would like to share
  2. Select "Share" in the left-hand menu
  3. Select "Embed a map" in the pop-up dialog
  4. Copy only the link text that is presented, beginning from https://www.google.com/maps/... until the end of the URL, to your keyboard 
  5. Next, navigate to your page in i:Create
  6. Select the area of the page that you would like to place your map  
  7. From the “Edit toolbar,” select “Insert/Edit Embedded Media”
  8. Select “Iframe/Youtube” from the “Type” dropdown menu
  9. In the “File/URL” field, paste the text you copied from the Google Maps share link
  10. Add a map title in the Title field to help those using accessibility devices identify the content
  11. Select “Insert” to embed your map onto the page

Ensure you publish the page in order for the embedded map to appear on your live website.

Link to a Google Map

You can link to an address in Google Maps directly as part of your written content (e.g., “Visit GHD Digital at 455 Philip St. in Waterloo"). This allows a user to find the address in the Google Maps Platform, and subsequently get directions to the location. 

Learn more about adding a hyperlink within your content.

Receiving an error on your Google Map?

If you are receiving an error on your Google Map, it may be because:

  • You went over the account's billing limit
  • Your payment method has been declined
  • Your Google account has been changed or deactivated
  • You have not set up a Google payment profile and billing account
  • You are experiencing issues with your API key configuration

If you receive an error, please ensure you have followed the account and API setup processes outlined above and that your payment method and account is working as expected. If you are experiencing issues with your API key configuration or have additional questions, please contact us at productsupport@ghd.com