Skip to Content
Author's profile photo Former Member

Google Map Custom Control in SAPUI5 – Part1

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

 

Assigned tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Buzek Volker
      Buzek Volker

      have you come across John Patterson's excellent https://blogs.sap.com/2014/07/01/google-maps-library-for-ui5/ yet?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Somehow I missed this blog. Now I have implemented that and its working fine. I will try to deploy in iPad Air as cordova app. And will see how it works. Thanks for sharing the link..

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Readers,

      Please follow this link https://blogs.sap.com/2014/07/01/google-maps-library-for-ui5/ to use your API key for custom control. Thanks @Buzek

      Author's profile photo Former Member
      Former Member

      hi Amritendu Patra

       

      how to add help text in google api.

      (example : if 'A'  list of 'A' area or State  should be displayed )

      Author's profile photo Hasten Cleans
      Hasten Cleans

      Hasten Cleanse, LLC of Houston, Texas, USA created a powerful product for controlling vapor suppression and vapor mitigation for the petrochemical sector.We strive to deliver a takes to be your vendor of choice in the hydrocarbon cleanup arena.vapor mitigation Texas