Creation of Google Maps Platform and Google OAuth

The APIs generated from the Client's Console Platform will be used on the Client's online ordering platform powered by UrbanPiper.

Written By Ops UrbanPiper (Collaborator)

Updated at August 12th, 2020

Google Maps Platform is a set of APIs that are managed from the Google Cloud Platform Console, Used For the Delivery Module, and Google OAuth API is used for Google Sign-Up on your online ordering platform.



To get started with Google Console you should click on 
https://console.cloud.google.com/getting-started
Sign In with the Google Account you want to use for your Google Console. 

Once signed in you will have to do the following steps to set up the Maps Account.

  1. Create a Billing Account
  2. Create a Project
  3. Enable Google Maps API 
  4. Get, Add, and Restrict an API key
  5. Create an OAuth API
  6. Share the Places and OAuth API with your ACM. 
  7. Provide support@urbanpiper.com access to your Project and Billing Account.




Step 1 & Step 2: Create a Project & its billing account

Note:
1. For Us to distinguish your Account please Use the below format to name the

 Project and Billing Account.
Project: <MERCHANT NAME> - website/app
Billing Account: <MERCHANT NAME, BA> - website/app
2. Do remember while creating the billing project choose the platform as Google Maps Account. If this is not chosen in the field of Business the billing account will pay for, we will not be able to Enable/Use the Maps API.



Step 3. Enable 3 APIs

To use Google Maps Platform with UrbanPiper, you must enable the 3 APIs which will be used in your ordering website.
To enable these APIs 

    1. Click the menu button   and select APIs & Services > Library.

    2. On the API Library page, locate Maps - just below the search bar and click VIEW ALL (15) or click on https://console.cloud.google.com/apis/library

  •  The 15 Google Maps Platform APIs and SDKs that you can enable are displayed. In this we will need 3 APIs to be enabled.

   3. On the Maps page, search and then click.
         a. Geocoding API  

  • If the button says ENABLE, click the button to enable the API or SDK.
  • If the button says MANAGE, the API or SDK is already enabled and you don't need to do anything further.

    Click on the back button  ⬅︎  available on the left of the API Library 
    Repeat Step 3 for the remaining 2 APIs we will need that are:
    b.Maps JavaScript API
    c.Places API

Step 4: Get, add and restrict an API key


To use Google Maps Platform you must have an API key. The API key is added to all of your requests and applications. We strongly recommended that you restrict your API key.

To get and add an API Key

    1. Click the menu button   and select APIs & Services > Credentials

    2. On the credentials page, click on the Create Credentials > API Key.


The Maps Places API keys are generated.


To restrict an API key to your website:

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

Here's a reference video.
 1. On the APIs & Services > Credentials > Click on the API Keys Name
 2. Choose Application restrictions as HTTP referrers.
3. In the website restrictions:    

  1. Add An Item, In the New item Add your website (Ex: urbanpiper.com) > Done
  2. Add An Item, In the New item Add your www.website  (Ex: www.urbanpiper.com) >  Done
  3. Add An Item, In the New item, Add your website/* (Ex: urbanpiper.com/*) > Done
  4. Add An Item, In the New item, Add your *.website/* (Ex: *.urbanpiper.com/*) > Done

  4. Save It.

Step 5: Create an OAuth ID


It is used in Google Login for Requests user consent for your website which can access the user's data


1. Click the menu button  and select APIs & Services > Credentials > Create Credentials > OAuth client ID

2. Click On Configure Consent Screen > External > Create
3. In Application Name write down a Title(Ex: UrbanPiper) > Save It
4. Now go Back to APIs & Services > Credentials > Create Credentials > OAuth client ID
5. You will be directed to the Create OAuth client ID page where In Application Type choose  

 Web Application.
6. In Authorized JavaScript origins add URL in the format of https://website.com (Ex:    https://urbanpiper.com)
7. Click On Create and your OAuth Client ID API is created.


Step 6: Share the API Key and OAuth Client with your ACM.

  1. For Maps API Key On the APIs & Services > Credentials > Copy the Key in the API                     Key section.
  2. For OAuth Client On the APIs & Services > Credentials > Copy the Client ID in the OAuth         2.0 Client IDs section.


Email these copied  keys to your respective ACM.

You can click on copy, available on the right side of the key.

Step 7: Provide access to your Project, and Billing Account 



[Access to be shared to support@urbanpiper.com, and your account manager from UrbanPiper]
 

For Project Permissions:

1. Click the menu button and select IAM & Admin > IAM 2. Click on ADD and enter support@urbanpiper.com in the New members by Select a Role as Project > Owner and Save It.

Repeat it for the email id of your account manager from UrbanPiper.

For Billing Permissions: 

1. Click the menu button  and select Billing > Manage Billing Accounts > Check☑️related billing account of the website and Add members for Permission available on the right side of the billing.  2. Click on Add members and enter support@urbanpiper.com in the New members by Select

a Role as Billing > Billing Account Administrator and Save It.
Repeat it for the email id of your account manager from UrbanPiper.


This completes the set up of the website Maps and OAuth Generation. 

If your Applications are powered by UrbanPiper you will have to create a New Project and New Billing account for Maps Account by following these.

Android Application

  1. Create a  New Billing Account
  2. Create a  New Project
  3. Enable Google Maps API 
  4. Get, Add, an API key
  5. Share the Places API with your ACM. 
  6. Provide support@urbanpiper.com access to your Project and Billing Account


iOS Application

  • Create a  New Billing Account
  • Create a  New Project
  • Enable Google Maps API 
  • Get, Add, an API key
  • Share the Places API with your ACM. 
  • Provide support@urbanpiper.com access to your Project and Billing Account


    To note for the Android & iOS set-up


    1. You should not be following the step of Restricting an API Key.

    It will be taken up by UrbanPiper at the time of Go-Live.
    2. Enable  3 APIs: 

    Android: Maps SDK For Android, Geocoding API  & Places API
    iOS: Maps SDK For iOS, Geocoding API  & Places API
    3. OAuth generated for the website in the first Project will be used for all the 3 platforms(Web,Android, & iOS). 


    You can switch between the projects by clicking on the Project DropDown Available on the Top Bar of your console


    After the above process of your Google Console platform(website/Android/iOS) set-up is done, convey it to your account manager from UrbanPiper about the completion of the Maps Project and OAuth. 

    The Account Manager will then verify the set-up and confirm it to you. 



    Note:
    1. To Learn How to Create/Manage a limited Quota, Navigate to Manage Your Cost of Use in https://developers.google.com/maps/premium/previous-licenses/places/quota
    2. To Learn How to create Budgets and Alerts at certain thresholds for your Billing Accounts Consumption please follow https://cloud.google.com/billing/docs/how-to/budgets

Was this article helpful?