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 Google as Client

(1) Launch an incognito window 

(2) Navigate to https://console.developers.google.com

(3) Login as the client utilizing their gmail account (obtained in Basecamp)
Note: The client should have either provided an existing gmail account or their newly created gmail account from kick-off

(4) Confirm that their gmail account is entered in Mission Control. https://bluetent.atlassian.net/wiki/spaces/MCKB/pages/2431975431

STEP 2: Create or Rename Project

Open

(1) Click on Select a project drop down:

Open

      
(2) Select the project titled "My First Project" OR click New Project if My First Project isn’t showing.

Rename My First Project

(3) Make sure My First Project is showing here:

(3.1) You should now see the below page. Click on Dashboard    

Note: If you don’t see the above page, click on the Hamburger Menu, Cloud Overview, Dashboard

(3.2) Click on → Go to project settings 

(3.3) Rename the Project name* from "My First Project" to the name of the client's website domain name and click Save

New Project

(4) Create New Project - enter the client's website domain in Project Name and click CREATE.

STEP 3: Confirm Billing is linked to the 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 Project (clients website domain name) is listed under 'Projects linked to this billing account'.

Note: You may have to wait a few minutes and refresh the page for the new project name to show.

STEP 4: Enable API’s

(1) Click on the Navigation Menu (hamburger menu) and 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) Click Go to Google maps Platform, leave both options checked.

(5) Select Maybe Later

(6) Follow the same steps above for the Geocoding API. It should already be enabled but if it’s not then follow the above steps to enable.

STEP 5: Configure Google Maps JavaScript API

Google Maps API must be enabled.

(1) In the Navigation Menu (hamburger menu) click on APIs & Services > Credentials:

(2) Click on the 3 dots and click Edit API Key

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

(4) Under Applications restrictions, select Websites

(5) Under Website Restrictions, click on ADD and enter the following BT's development domains and the client's live or to-be live domain. 

Add each of the below Referrers: 

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

(7) Click Save

STEP 6: Configure Google Maps Geocoding API

Google Maps Geocoding API must be enabled.

(1) Go to the Credentials page

(2) Click Create Credentials, API Key

(3) You should now see this. Click Close

(4) Click the 3 dots and click Edit API Key

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

(6) Leave the Application Restrictions set to: None

(7) Under API Restrictions → Select: Restrict Key → from the dropdown that populates after selecting 'Restrict Key', select: Geocoding API

(8) Click Save

Note: This credentials page should now look like below.

STEP 7: Copy Keys to Mission Control

(1) Go to the Credentials page

(2) Click Show Key for each API and copy the Geocoding and Maps API keys and add them into Mission Control.

STEP 8: Add Maps & Geocoding to Rezfusion Website

(1) Go to the Dashboard of client's development website

(2) Enter the Google Maps API Key into the site configuration:

  2.1. Navigate to the Drupal Menu → Configuration → Web Services → GMap

  2.2. Enter Google Maps API Key

  2.3. Click Save Configuration at the bottom of the page

(3) Enter GeoCoding into the site configuration: 

  3.1. Navigate to the Drupal Menu → Configuration → Content Authoring → Location → Geocoding Options

  3.2. In the Country column of the table, find "United States" 

  3.3 Select the Google Maps radio button

  3.4. Click Save Configuration at the bottom of the page

  3.5. Find United States again and click Configure Parameters

  3.6. Enter the Geocoding Key in the Google Geocoding API Server Key field 

  3.7. click Save Configuration

STEP 9: Map Clusters (only if client has 250+ listings)

Cloud sites with large numbers of units experience slow load times and/or failed map loads. To prevent this, for sites with 250 or more listings, follow the below steps to enable Map Cluster

(1) Navigate to Dashboard → Settings → Property Search 

(2) Enable clusters

STEP 10: Test G-Maps Functionality

(1) Go to the Home Page of the client's dev site and click on Vacation Rentals

(2) With the listings on the left side of the page, there should be a Google Maps view with pins to each of the client's listings.  This view should also make it immediately apparent if the client has their units properly geolocated within their PMS.

Related articles