Google Maps API Guide

Google Maps API Guide

Google-Maps

Google requires that you create an API Key in order to display and use Google Maps on your website.

This walk-through will cover creating a new Project for this Google Maps API Key.

Logging into the Google Developer Console

To start you will need to log in to the Super Admin account for your site.

If you have not setup Google Maps on your website, you will be prompted with a popup window with a link to go to the Settings section.

map-prompt

If you are changing an existing API Key, or have closed the above-mentioned prompt window; select Settings from the Primary Navigation located in the top right corner of the REW CRM. This will bring you to the Lead Settings section. Scroll down until you find the Google Maps API Key.

settings_section

map-api-1

Next; click the link on Step One, which takes you to the Google Developer Console.

Direct Link to General Dashboard

Direct Link to Create a New API

You will need to log in with your Google Account (same account used for Analytics, Ad-words, etc.) If you do not have an account simply sign up with your email address that you want to be associated with this task.

Creating a Project

Once signed into the Google Developer Console you will be brought to the dashboard. *For this walkthrough we will be creating a fresh project, however, you can edit an existing project to achieve the same results.

Select Create Project to begin.

create-project

On the next page, ask you to name your project. It is always best to name it in a way to easily identify what it is for. In this case, something Google Maps related.

name-project

Once you’ve named the project click Create and you will be brought back to the dashboard.

Creating the API Key

Click Credentials on the left-hand side then Create Credentials and select API Key.

create-key

After selecting API Key a window will pop up saying API Key Created. In here you will see your Google Maps API key. Click Restrict Key.

select-restrict-key

Key Restrictions

Application Restrictions:

Under Application Restrictions select HTTP referrers (websites), this will present you with additional options below.

This is the section where you will enter the approved domains that can use this API Key. You will need to follow the parameters found below in the guide. Replacing domainname with your website domain. If your site is in development; replace name.rewtemplates with your current development site.

name.rewtemplates.com/*

*.name.rewtemplates.com/*

*.domainname.com/*

Google_Maps_referrers

API Restrictions:

Next, we will need to configure the API Restrictions to allow the use of the different Map APIs.

Under the API Restrictions section, select the Restrict Key option.
image

From the API Restrictions, drop-down menu select the following APIs.

  • Directions API
  • Distance Matrix API
  • Geocoding API
  • Maps Elevation API
  • Maps JavaScript API
    image

Once both the Applications and API restrictions have been configured you can select Save.

>Back to Top

Additional Required API’s to be Enabled for Maps

Google Maps requires some additional APIs enabled to support your Real Estate Webmasters website.

Within the Google Developer Console select the Library option from the left side Menu.

api_library

This will bring you to the API Library where you can select individual APIs to activate.

Using the Search Bar located at the top of the API Library search for the following APIs.

map-api-4

Google Places API Web Service

Search for Google Places API Web Service and select the Places API option.

places_api

On the Places API page select ENABLE.

places_api_enable

After selecting ENABLE you will be brought to the Places API overview page. From here we will need to navigate back to the API Library.

Select the top left Menu and navigate to APIs & Services and select Library.

api_library2

Next, you will need to search for another API to enable.

Maps Embed API

Search for Maps Embed API and select the Maps Embed API option.

maps_embed_api

On the Maps Embed API page select ENABLE.

maps_embed_api_enable

After selecting ENABLE you will be brought to the Places API overview page. From here we will need to navigate back to the Credentials page.

Adding additional API’s to your API Key Restrictions

For these new APIs to work with your Google Maps API Key we will need to add them to your existing API Application Restrictions.

Select the top left Menu and navigate to APIs & Services and select Credentials.

image

On the Credentials page you will find a list of your API Keys. Here you will want to select your Google Maps API Key.

api_credentials_page2

This will take you to the Restrict and rename API Key page. Here scroll down to the API Restrictions heading and use the drop-down menu to review your selected APIs.

api_restrictions2

You will need to select Maps Embedded API and Places API.

api_restrictions3

Once selected you can select save to finish your setup.

image

Adding the API Key to the CRM Settings Section

Once you’ve finished adding the additional API restrictions, from the Credentials Screen, copy your API key.

copy-api-key

Once you have copied the API Key to your clipboard navigate to your Settings Section of your site (yourdomain.com/backend/settings). When in the Settings section scroll down to the Google Maps API Key heading. Here there will be an API Key field where you can paste in your Google Maps API Key.

add_api_key

Once added you can save your CRM Settings page.

Enable billing for Google Maps

Beginning on July 16, 2018, you’ll need to enable billing with a credit card and have a valid API key for all Google Maps projects.

Setting up Billing Account

Go to https://console.developers.google.com/billing and click Add billing Account.

mceclip0.png

Next you will need to set your Country and accept the Google Cloud terms of service.

mapsbilling6.png

After agreeing to the Terms of Service you will be prompted to update your contact information…

mapsbilling7.png

… and your billing information

mapsbilling8.png

Click Start my free trial and you should be good to go!

Congratulations you have completed setting up your Google Maps API Key!

thanks Craig! This is legit the most complicated part of the whole setup (and it’s google that complicates it) one day I hope Google makes this easier.

Hey Morgan,

I’m not sure if something changed since these instructions were made but they’re no longer an accurate road map (I think), at least they weren’t for me. There were things I had to do out of order to get other things to show up that are referenced. Somehow I got through it (I think).

1 Like

@Prakriti can you please vet this?

Hi Morgan,

Sure, I will review the instructions and will get them updated.

@Flasch186 Thanks for bringing this to our attention. I reviewed your site and looks like you have set up the Google Maps API correctly :slight_smile:

Regards,
Prakriti

Hi all – we are setting up the maps on our new site & part of enabling the API involves setting up a billing account. Is it possible to have a ballpark sense of what charges associated with this might be like?

I am stuck at the dropdown menu for the 5 API restrictions. I don’t see any of the items REW wants us to select.

Hi @meredithdowner

Try using this link to start your Maps API project. It should ensure that all the needed API’s are available to select: Google API Console

Or you can use the instructions below that show how to enable additional APIs that are not in the dropdown list. There are a total of 7 API’s that need to be enabled

  • Directions API
  • Distance Matrix API
  • Geocoding API
  • Maps Elevation API
  • Maps Embed API
  • Maps JavaScript API
  • Places API

Additional Required API’s to be Enabled for Maps

Google Maps requires some additional APIs enabled to support your Real Estate Webmasters website.

Within the Google Developer Console select the Library option from the left side Menu.

api_library

This will bring you to the API Library where you can select individual APIs to activate.

Using the Search Bar located at the top of the API Library search for the missing APIs.

map-api-4

Google Places API Web Service

Search for Google Places API Web Service and select the Places API option.

places_api

On the Places API page select ENABLE.

places_api_enable

After selecting ENABLE you will be brought to the Places API overview page. From here we will need to navigate back to the API Library.

Select the top left Menu and navigate to APIs & Services and select Library.

api_library2

Next, you will need to search for the next API to enable. Repeat these steps until all APIs are enabled

I had to add them all separately like the others in the directions. Now I am stuck @ where to add API key to backend @REWSupport

Hi Jessica,

Thank you for reaching out.
If you have generated the API key, you just need to add it to the backend.
Go to settings and on the same page scroll till you see the section for Google Maps API Key
Screen Shot 2021-11-23 at 9.03.58 AM

Add the key and hit save
Screen Shot 2021-11-23 at 9.21.51 AM

Let me know if you have any follow up questions on this :slight_smile:

Best Regards,
Prakriti

Are we able to add the API key before we go live? I’m wanting to add some polygon searched on some of my pages. https://richardsoto.rewtemplates.com/

Good day @RichardSoto !

Thank you for your inquiry. Yes! You are able to add the Google Maps API Key prior to going live.

If you login into the Google Console and go to the Google Maps API Key project you have created, Click Restrict Key .

Application Restrictions:

Under Application Restrictions select HTTP referrers (websites), this will present you with additional options below.

This is the section where you will enter the approved domains that can use this API Key. You will need to follow the parameters found below in the guide.

richardsoto.rewtemplates.com/*)

.richardsoto.rewtemplates.com/

.richardsoto.com/

Google_Maps_referrers

If you are unsure about how to get to this step, please email us at support@rew.com and we can set up a call to assist you!

Happy New Year!

Kindest Regards,

Stephanie

Hi there, I have followed all of these steps and this is what the maps looks like on my site. Please help!