Google Map Custom Control in SAPUI5 - Part1

[Former Member]

Hi Readers ,

Google Map in Ui5 application can be used for the various purpose.

This blog explains about the Google Map integration with SAPUI5 application as a custom control.

To integrate Google Maps to SAPUI5 application, you need google map API. There are several APIs available for Google maps itself, like Google Map android API, Google Maps for IOS, Google maps for Street, Google maps Directions API, similarly many more. The one we are going to use is Google Maps JavaScript API.

To use google API, you will need particular developer API key. Below are the steps on how to create a developer key to use the API in the application.

1. Google API Console   


2. Create a new project. 


3. After creation of project the screens look like this:


4. Create credentials for the API Key: 


5. After creation of API key we will enable Google Maps JavaScript API:
   


6. Copy the API key in a notepad for future references.

 

Please find the link for using this API in our SAPUI5 application :

Google Maps library for UI5 by John Patterson

 

N.B:- Google Maps APIs are free for a wide variety of use cases, with predictable overage pricing and usage limits for APIs and annual contracts for enterprise deployments. More Details