Google Maps API Setup

As noted within our Basecamp's Site Build Team list of "to-dos", each Rezfusion website should be configured to enable Google Maps functionality.  As with several other Google-related to-dos, you will be performing steps in both Google Chrome (preferred browser) and within the client's new Rezfusion development website.

STEP 1: LOG IN TO GMAIL ACCOUNT

1. Navigate to https://console.developers.google.com

2. confirm you are logged on to the gmail account (icon and info in upper right hand corner of browserO you wish to use for Google Maps API billing

STEP 2: SELECT PROJECT

1. Click on 'Select a project' drop down:

Open

1. Select the project titled "

My First Project" or use existing project you have already.

Open

Click on the Navigation Menu (hamburger menu) and click on Home:

Click on → Go to project settings 

If a new project, rename the project name* from "My First Project" to the name of the website domain name and Save

STEP 3: CONFIRM BILLING IS LINKED TO PROJECT

(1) Click on the Navigation Menu (hamburger menu) and click on Billing:

(2) Click on Manage to manage the Billing account:

(3) Confirm the newly named, or selected project is listed under 'Projects linked to this billing account'

STEP 4: ENABLE & CONFIGURE GOOGLE MAPS API KEY 

(1) Click on the Navigation Menu (hamburger menu) go to: APIs & Services → from the sub-menu select: Library 

(2) From the API Library use the search bar to find and select: Maps JavaScript API

(3) Enable Maps JavaScript API

(4) Now that the Maps JavaScript API is enabled, you need to Create the API Key (credentials)

  a. In the Navigation Menu (hamburger menu) click on Credentials:

 b. Click on +Create Credentials first and then select API Key and an API Key will be created

c. Click on Restrict Key:

(5) Rename the key to: Google Maps API Key

(6) Under Application restrictions, select HTTP referrers (web sites)

(7) Under Website restrictions click on ADD AN ITEM  requests from these HTTP referrers (web sites), enter the following BT's development domains and the client's live or to-be live domain. 

How do I restrict my API key to specific websites?

Use an HTTP referrer to restrict the URLs that can use an API key.

Here are some examples of URLs that you can allow to set up a referrer:

• A specific URL with an exact path: www.example.com/path

• Any URL in a single domain with no subdomains, using a wildcard asterisk (*): example.com/*

• Any URL in a single subdomain, using a wildcard asterisk (*): sub.example.com/*

• Any subdomain or path URLs in a single domain, using wildcard asterisks (*): *.example.com/*

• A URL with a non-standard port: www.example.com:8000/*

Note: query parameters and fragments are not currently supported; they will be ignored if you include them in an HTTP referrer.

(9) Under API restrictions → Select: Restrict Key → from the dropdown that populates after selecting 'Restrict Key', select: Maps Javascript API

(10) Click Save

Final Step

Simply paste your Google Maps Javascript API Key into Hub, or provide the API key to your. Expand More Settings to see other options available in the Google API such as default zoom, and map clustering.