<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=2002698&amp;fmt=gif">

Whitaker-Taylor Insights

How to Integrate Google Maps in FIORI Application

Jun 2, 2017 11:35:00 PM / by Whitaker-Taylor

shutterstock_410802358.jpgThis document explains how to integrate Google Maps on FIORI application using SAP UI 5 SDK. SAP UI5 is an open standard technology that supports with Java Script API, which is also an open standard technology used by every company.


We need an HTML page to place the Google map in which we can put a container element to display the Google map. This container element is nothing but a DIV tag. This DIV tag is used to embed the Google map. (This is the place where the Google map displays.)

 How to Integrate Google Maps in FIORI Application

To invoke Google Maps on FIORI application, we need to utilize the following Google Maps API:



Next, we need to create the above Google Maps API. It has certain properties such as control object, center parameter (the place where it needs to be placed on the container element) and pass the ZOOM level. Google Maps API sends the map, and then it displays on the container object, which is nothing but a DIV tag.


Here is the syntax to create the google map object:

Var oMap = new google.maps.Map(control Obj, {center: {lat: “”, lng:””}, Zoom:});


To trace the location on the map, we use longitude and latitude properties (coordinates). In order to consume the Google Maps, we need to load the bootstrap of Google API, which invokes the Google engine. This is achieved through custom control in SAP UI5 SDK since there is no direct control to map integration in sap UI5. To invoke the Google Maps we need to get the KEY from Google. The KEY is not free for productive purpose but for developers, Google will provide a temporary KEY that can be used to integrate the maps in FIORI applications.

 How to Integrate Google Maps in FIORI Application

Geo Coder API is another API provided by Google which helps to search for a location on the integrated Google map on FIORI application. The following is the API necessary to provide the search feature:


google. Maps. GeoCoder()


Marker API is another API to highlight the location with a red mark. Once Google Maps displays, when we search for a location it highlights with a red marker. It will also display a user icon which we can drag and display the location photos on the map. The following is the API to invoke the marker API:


google. Maps.Marker().


The search location can be entered on the search area, and then it will be highlighted with red marker.  


How to Integrate Google Maps in FIORI Application

How to Integrate Google Maps in FIORI Application

Click the Subscribe Button for More Information About SAP SuccessFactors.



Topics: SAP, HR

Written by: Whitaker-Taylor