Advance SAPUI5 – 16 – Integration of Google Maps JavaScript API with SAPUI5 App

7
7095
SAPUI5 and Google Map

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:

fnSave and fnCancel are functions created in Pop-up Screen for Saving the data and Cancelling the action.

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 ReadReal 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

All SAPUI5 Tutorials

7 COMMENTS

    • 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

    • 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

  1. 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

  2. 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

LEAVE A REPLY

Please enter your comment!
Please enter your name here