Many a times, freshers in any technology ask for real Project examples. To those enthusiasts, my suggestion will be, pick any scenario you can think of, and it can be be a real project scenario. Curiosity and Exploration is the key to learning. When we are curious like a kid and start asking questions, we figure out interesting stuffs. Recently, I was searching for some restaurants and their respective routes on Google Map in some Food Delivery Android Mobile App. While using the app I thought how it would look if we integrate the Google Map with SAPUI5 App and make it a utility tool for finding a place, calculating distance between two spots, custom marker facilities and so on. One of my friends has a signature captions which says “Thinking is not enough, we need to do”. 🙂
I tried to implement my thoughts and eventually, I was successful in creating a decent app. In this article, I will demonstrate all the steps in details to achieve the functionality.
To integrate Google Map to SAPUI5 Application, we need Google Map API. Google has provided numerous APIs viz Google Map Android API, Google Maps for iOS, Google Maps for Street, Google Maps Direction API and many more. For our application, we are going to use Google Maps JavaScript API. The reason to choose Maps JavaScript API is simple, it allows us to customize the maps with our own content and imagery for display on web pages and mobile devices.
Also Check – GPS like tool in SAP using Google Map API
Glimpse of the Google Map we integrated.

To use the Google Maps API, we need a developer key. Before learning how to integrate Google Maps API with SAPUI5, we need to learn how to create a developer key?
A. Steps for Creating Google Maps Developer Key
Step 1 : Go to the Google Developers Console
Link to go to Google Developers Console.
Step 2 : Create a New Project.
Step 3 : Select created Project from list of Projects and Select Dashboard Tab.
Step 4 : Click on API Explore and enable APIs inside Getting Started Tile/Block in same page.
Step 5 : On next page click on Enable APIs and Services button .

Step 6 : After clicking on the button it will navigate to API Library Page. Here select Maps JavaScript API.
Step 7 : On next page click on Enable button, below Maps JavaScript API. Now API will be enabled and we need to create credentials for the same.
Step 8 : Select Credentials tab and click on Hyper Link i.e. Credentials in APIs & Services.

Step 9 : On next page click on CREATE CREDENTIALS button.

Step 10 : Select API key and OAuth Client ID to create the both one by one under CREATE CREDENTIALS button.
Steps 11 : In Left Pane of the console/page under Credential, you can see your project’s API Keys, oAuth Client ID, and Service Accounts details.

Hope you got a fair idea of how to create a Google Maps API Developer Key and you will be able to generate the developer key.
Now let’s move to integration part of Google Maps JavaScript API with SAPUI5 Application.
Also Check – Get Latitude and Longitude of any place using Google Map API in SAP
B. Steps to Integrate Google Maps JavaScript API with SAPUI5
Step 1 : Create an SAPUI5 Application.
Step 2 : Load the Maps JavaScript API.
To load the Maps JavaScript API, we need to use a script tag which is shown in below example:


Step 3 : Creating DOM Element for the Map.

Step 4 : Creating Map Object and Setting the Map Options (Default Place Coordinates i.e. Latitude and Longitude).
Redefine onAfterRendering hook method of SAPUI5 and write the below code for creating Map Object and setting the Map Options/Required Parameters.

Step 5 : Creating Custom Marker on clicking inside Map and saving the custom data based on requirement.

Pop-up screen code is as below:

Custom Method for displaying Pop-up screen and capturing/saving the data for the particular created Marker as per the requirement. Here the method I have created is named as fnOnClickPlace which is highlighted and called in above screenshot. Source code for this method is as below:


Snippet for processing the Captured/Saved data as JSON and using as per requirement.


Step 6 : Google Map’s Search Functionality (Finding/Searching Particular Place)
Here user can find/search any place across the globe with the help of Google’s Powerful Google Maps JavaScript API. Below is the screenshots of the logic used to achieve the output.

For testing the implemented Search functionality of Google Map, I am going to search the place as ‘Parliament of Delhi’. After clicking on Search button, it’s showing the correct result i.e. Parliament of India.

Also Read – Real Time Exchange Rate with Real Time Data Using Yahoo Finance API
Step 7 : Calculating Distance between two places/points
We can check the distance between two places/points with the help of Google Maps JavaScript API easily. Source Code is as below:



For testing the Distance Calculation functionality of our implemented SAPUI5 Application, I am going to find the distance between Silkboard and Roopena Agrahara. The calculated distance between both the points is absolutely correct. You may validate it using other sources.

We understand, this is an advanced topic and you will have few queries. Please feel free to put your questions. We will try are best to reply to provide further clarification. Also, please comment your suggestions, feedback for me which will help me present better tutorials in future.
Till our next article, stay indoor, stay safe and do your part in fighting this novel COVID-19.
Feeback pLEASE!!!
Do join 6070+ SAP Technical Consultants in this Telegram SAP Technical Discuss Group. Ask, Answer and Learn is our Motto. You need to install Telegram App first in your mobile or desktop and then click the joining link.
Please SUBSCRIBE to SAPYard’s Youtube Channel for Free End to End SAP Video Course and Training.
Please follow our LinkedIn Page, LinkedIn Group, Facebook Page, Twitter and Instagram.
Save our number +1-646-727-9273 and send us a Whatsapp message ‘LEARN’ to be part of our Learning Community.
Check Some Advanced Topics in SAPUI5
- Advance SAPUI5 Part 33 – Working with SAPUI5 Controls | Icon Tab Bar – Part 2
- Advance SAPUI5 Part 32 – Working with SAPUI5 Controls | Icon Tab Bar – Part 1
- Advance SAPUI5 Part 31 – Working with VizFrame Charts in SAPUI5
- Advance SAPUI5 Part – 30 – Advanced features of SAPUI5 Grid table – Part 2
- Advance SAPUI5 Part – 29 – Advanced features of SAPUI5 Grid table – Part 1
- Advance SAPUI5 Part – 28 – SAPUI5 Responsive table – Contextual width
- Advance SAPUI5 Part – 27 – SAPUI5 Responsive Table Data Export to CSV file
- Advance SAPUI5 – Part 26 – Sorting Feature of SAPUI5 Grid table
- Advance SAPUI5 – Part 25 – Working with GRID table in SAPUI5
- Advance SAPUI5 – 24 – How to use Annotation Modeler in SAP Web IDE to build FIORI Application
- Advance SAPUI5 – 23 – Worklist App in SAP UI5 using a Responsive Table Control
- UI5 Tooling – How to Deploy UI5 App on Netlify – 3
- UI5 Tooling – Consume OData Service via UI5-Middleware-SimpleProxy – 2
- UI5 Tooling – Develop UI5 Apps in the Editor of your Choice – 1
- Advance SAPUI5 – 22 – Handling Application Appearance using Device Model
- Advance SAPUI5 – 21 – Drag and Drop with custom Button Control
- Advance SAPUI5 – 20 – How to Handle Input Validations using MessageManager and MessagePopOver?
- Advance SAPUI5 – 19 – Pagination in Table control with $top and $skip Query Options
- Advance SAPUI5 – 18 – Using liveChange Event, with Custom Filter Function in sap.m.Table Control
- Advance SAPUI5 – 17 – How to Directly Open Fiori App with pre-filled Data from Backend?
- Advance SAPUI5 – 16 – Integration of Google Maps JavaScript API with SAPUI5 App
- Advance SAPUI5 – 15 – Attractive & Responsive Login Page Design in SAPUI5
- Advance SAPUI5 – 14 – Develop an e-Signature Pad using SAPUI5
- Advance SAPUI5 – 13 – How to Develop Audio Video Multimedia Player in SAPUI5
- Advance SAPUI5 – 12 – Chatbot Integration using SAP’s CAI API with SAPUI5
- Advance SAPUI5 – 11 – Fun with Super Mario in SAPUI5
- Advance SAPUI5 – 10 – How to Generate Installable .apk file for Andriod from SAPUI5 App?
- Advance SAPUI5 – 9 – Promises in UI
- Advance SAPUI5 – 8 – How to Get Weight from the Weigh Scale/Weigh Bridge using Python for SAPUI5 Fiori Apps?
- Advance SAPUI5 – 7 – Voice Recognition
- Advance SAPUI5 – 6 – Offline Application in 8 Steps
- Advance SAPUI5 – 5 – Hybrid App Tutorial
- Advance SAPUI5 – 4 – How to Get Weight from the Weigh Scale/Weigh Bridge Bluetooth Device using SAPUI5 Hybrid App?
- Advance SAPUI5 – 3 – How to send e-mail in SAPUI5 Hybrid App?
- Advance SAPUI5 – 2- Push Notification in SAP – ABAP Push Channel, ABAP Messaging Channel in SAPUI5 – a Real Time Interaction
- Advance SAPUI5 – 1- Trick to Send QR code or Barcode Data Remotely from Android to PC for SAPUI5 App
All SAPUI5 Tutorials
- Journey to SAPUI5
- SAPUI5 Tutorial with WebIDE. Part I. How to Consume Custom OData in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part II. Routing and Navigation in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part III. Drop Down in SAPUI5 Applications (2 Methods)
- SAPUI5 Tutorial. Part IV with WebIDE. Routers and Routing in SAPUI5
- SAPUI5 Tutorial with WebIDE. Part V. Navigation in SAPUI5 without Routers
- SAPUI5 Tutorial with WebIDE. Part VI. Using Fragments in SAPUI5 Fiori Applications
- SAPUI5 Tutorial with WebIDE. Part VII. An ABAPer’s First SAPUI5 App in SAP WebIDE
- SAPUI5 Tutorial with WebIDE. Part VIII. Deploy my First SAPUI5 App in WebIDE
- SAPUI5 Tutorial with WebIDE. Part IX. Alternative to oModel.setSizeLimit()
- SAPUI5 Tutorial with WebIDE. Part X. Using Media Queries in UI5 Application
- SAPUI5 Tutorial with WebIDE. Part XI. An ABAPer’s Second SAPUI5 App
- SAPUI5 Tutorial with WebIDE. Part XII. SAPUI5 Basic Debugging for Beginners
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 1
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 2
- Add Delete & Save Multiple Records in SAPUI5. Part 1 – ADD
- Add Delete & Save Multiple Records in SAPUI5. Part 2 – DELETE
- Add Delete & Save Multiple Records in SAPUI5. Part 3 – SAVE
- Modularization and Large Scale Architecture in SAPUI5
- Use of Third Party (or) External Resources in SAPUI5. Part I – Overview
- Use of Third Party (or) External Resources in SAPUI5. Part II – Practical with Gauges
- How to Deploy UI5 App without LPD_CUST?
- SAPUI5 For ABAPers – Component Reuse with Real Time Example
- SAPUI5 for ABAPers – Consuming OData Service from SAPUI5 Application – CRUD Operations
- Advance SAPUI5 – 1- Trick to Send QR code or Barcode Data Remotely from Android to PC for SAPUI5 App
- Advance SAPUI5 – 2- Push Notification in SAP – ABAP Push Channel, ABAP Messaging Channel in SAPUI5 – a Real Time Interaction
- Advance SAPUI5 – 3 – How to send e-mail in SAPUI5 Hybrid App?
- Advance SAPUI5 – 4 – How to Get Weight from the Weigh Scale/Weigh Bridge Bluetooth Device using SAPUI5 Hybrid App?
- SAPUI5 – How to Change the Master List Item Selection Based on Changes in Hash Tag URL?
- SAPUI5 – How to Load a Full Screen and Navigate to Master-Detail Application? Approach 1
- SAPUI5 – How to Load a Full Screen and Navigate to Master-Detail Application – Approach 2
- SAPUI5 – How to change the background color of sap.m.Table’s cells of each row based on specific condition?
- SAPUI5 Binding Part 1- Aggregation Binding in Table Control
- SAPUI5 Binding Part 2 – Element Binding Approach 1
- SAPUI5 Binding Part 3 – Element Binding Approach 2
- SAPUI5 Binding Part 4 – Expression Binding Approach 1
- SAPUI5 Binding Part 5 – Expression Binding Approach 2
- Expression Binding Overview in SAPUI5
- SAPUI5 – Factory Functions for Beginners
- SAPUI5 – List Control Using Formatters
- SAPUI5 – How to Apply CSS in UI5 Apps?
- Advance SAPUI5 – 5 – Hybrid App Tutorial
- Advance SAPUI5 – 6 – Offline Application in 8 Steps
- SAPUI5 – Use of Formatter Function
- Advance SAPUI5 – 7 – Voice Recognition
- SAPUI5 – Resource Model for Freshers
- Advance SAPUI5 – 8 – How to Get Weight from the Weigh Scale/Weigh Bridge using Python for SAPUI5 Fiori Apps?
- SAP Fiori Tutorial. Part 7 – Custom Fiori App to Approve Change Requests in SOLMAN
- Advance SAPUI5 – 9 – Promises in UI
- SAPUI5 – Binding JSON Model Data in SAPUI5 List Control using SAP Web IDE
- SAPUI5 – Custom Control in UI5
- SAPUI5 – Understanding the ObjectListItem Control of UI5
- SAPUI5 – How to Build Master Detail UI5 App along with Search?
- SAPUI5 – How to Consume OData Model Data in UI5 using WebIDE?
- SAPUI5 – Routing in a Master Detail App
- SAPUI5 – Dynamic Binding with Comparison Microchart in SAPUI5
- 130 SAPUI5, SAP Fiori, HTML, CSS, JavaScript & jQuery, Interview Questions & Answers
- Advance SAPUI5 – 10 – How to Generate Installable .apk file for Andriod from SAPUI5 App?
- Step by Step Guide to Install SAP Web IDE Personal Edition
- Advance SAPUI5 – 11 – Fun with Super Mario in SAPUI5
- Advance SAPUI5 – 12 – Chatbot Integration using SAP’s CAI API with SAPUI5
- Advance SAPUI5 – 13 – How to Develop Audio Video Multimedia Player in SAPUI5
- Advance SAPUI5 – 14 – Develop an e-Signature Pad using SAPUI5
- Advance SAPUI5 – 15 – Attractive & Responsive Login Page Design in SAPUI5
- Advance SAPUI5 – 16 – Integration of Google Maps JavaScript API with SAPUI5 App
- Advance SAPUI5 – 17 – How to Directly Open Fiori App with pre-filled Data from Backend?
- Advance SAPUI5 – 18 – Using liveChange Event, with Custom Filter Function in sap.m.Table Control
- Advance SAPUI5 – 19 – Pagination in Table control with $top and $skip Query Options
- Advance SAPUI5 – 20 – How to Handle Input Validations using MessageManager and MessagePopOver?
- Advance SAPUI5 – 21 – Drag and Drop with custom Button Control
- BAS 3 – SAP Business Application Studio – Component Preload File with Sample App
- UI5 Tooling – Develop UI5 Apps in the Editor of your Choice – 1
- UI5 Tooling – Consume OData Service via UI5-Middleware-SimpleProxy – 2
- UI5 Tooling – How to Deploy UI5 App on Netlify – 3
- Advance SAPUI5 – 23 – Worklist App in SAP UI5 using a Responsive Table Control
- Advance SAPUI5 – 24 – How to use Annotation Modeler in SAP Web IDE to build FIORI Application
- Advance SAPUI5 – Part 25 – Working with GRID table in SAPUI5
- Advance SAPUI5 – Part 26 – Sorting Feature of SAPUI5 Grid table
- Advance SAPUI5 Part – 27 – SAPUI5 Responsive Table Data Export to CSV file
- Advance SAPUI5 Part – 28 – SAPUI5 Responsive table – Contextual width
- Advance SAPUI5 Part – 29 – Advanced features of SAPUI5 Grid table – Part 1
- Advance SAPUI5 Part – 30 – Advanced features of SAPUI5 Grid table – Part 2
- Advance SAPUI5 Part 31 – Working with VizFrame Charts in SAPUI5
- Advance SAPUI5 Part 32 – Working with SAPUI5 Controls | Icon Tab Bar – Part 1
- Advance SAPUI5 Part 33 – Working with SAPUI5 Controls | Icon Tab Bar – Part 2











Hey Mahendra,
Is your code stored in github? If yes then can you please share it?
Thanks & Regards,
Mohit Sisodiya
Hi Mohit,
It’s not deployed to GitHub.
If you’re facing any problem to achieve the functionality. Please let me know I’ll help.
Thanks & Regards,
Mahendra Saini
The blog is useful and informative. Can you help me to get the current location alone ?
Hi Soundharyaa,
To get the current location of the User or Device, you can use getCurrentPosition() method of Navigator.geolocation property with the help of Maps JavaScript API.
Here i am going to write the block of code for reading the current location.
//=====================================================
//=====================================================
var that = this,
vCurrLat = 0,
vCurrLng = 0;
//———— Current Location ———–//
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
vCurrLat = pos.lat, vCurrLng = pos.lng;
window.mapOptions = {
// center: new google.maps.LatLng(12.904, 77.648),
center: new google.maps.LatLng(vCurrLat, vCurrLng),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//—– Creating Map Object —–//
var map = new google.maps.Map(that.getView().byId(“id_GMapContainer”).getDomRef(), mapOptions);
var vCurrLatLng = new google.maps.LatLng(vCurrLat, vCurrLng);
var vCurrMarker = new google.maps.Marker({
position: vCurrLatLng,
map: map
});
}, function errorCallback(error) {
//write error handling
}, {
maximumAge: 0,
timeout: 5000,
enableHighAccuracy: true
});
}
//=====================================================
//=====================================================
Regards,
Mahendra
Hi Mauricio,
I would like to recommend you to use AJAX call(if you are not going to call SAP Backend System). While using AJAX call, you can pass CSRF Token for security in the request Method call.
Thanks & Regards,
Mahendra
Hey Mahendra,
Thanks for your post!
I would like to know if i need to call a public API and send the data to the backend, like SAP. Which security guidelines you recommend please?
Best regards,
Mauricio
Hi Mauricio,
I would like to recommend you to use AJAX call(if you are not going to call SAP Backend System). While using AJAX call, you can pass CSRF Token for security in the request Method call.
Thanks & Regards,
Mahendra