Hi Readers !!

Google Map in Ui5 application can be used for the logistics purpose of the organization as it provides output for optimized route for any vehicle, optimized distance, optimized travelling time, Traffic updates on the map, Toll Roads, information about the route and many more.

Map services are provided by many vendors which can be implemented in Ui5 applications.This blog explains about the Google Map integration with SapUi5 application.

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. Go to the Google Developers Console.
  2. Create or select a project.
  3. Click Continue to enable the API and any related services.
  4. On the Credentials page, get a Browser key (and set the API Credentials)

Example: “https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”

Steps to create the application:

  • Open the SAP WEB IDE from Services.
  • Choose File -> NEW -> Project From Template -> SAPUI5 Application.
  • Provide the basic information(Project Name and NameSpace) to the application.
  • Select the View Type (HTML,XML,JSON,JavaScript) as HTML(using in our application).

Write the following code in your view(HTML)

 

<form>
      <div id="front-div">
      <strong>Start:</strong> <input id="origin"><br>
      <strong>End:</strong> <input id="destination">
      </div>
</form>
<div id="left-div"></div>
<div id="map"></div>
<script src="model/distCal.js"></script>


Create a JS(javascript file) in the project folder model and add the following code

 

window.addEventListener('load', function() {
	var script = document.createElement('script');
	script.type = 'text/javascript';
	script.src =
		'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&avoid=TOLLS&libraries=places&callback=initMap';
	document.body.appendChild(script);
});

function initMap() {
	var directionsRenderer = new google.maps.DirectionsRenderer({
		map: map
	});
	var directionsService = new google.maps.DirectionsService;
	var map = new google.maps.Map(document.getElementById('map'), {
		zoom: 6,
		center: {
			lat: 23.0225,
			lng: 72.5714
		} //Initial Location on Map
	});
        directionsRenderer.setMap(map);
	directionsRenderer.setPanel(document.getElementById('left-div'));
	var control = document.getElementById('front-div');
	control.style.display = 'inline';
	map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
        document.getElementById('origin').addEventListener('change', function() {
		distanceCalculator(directionsService, directionsRenderer);
	}, false);

	document.getElementById('destination').addEventListener('click', function() {
		distanceCalculator(directionsService, directionsRenderer);
	}, false);
}

/***************To Calculate and Display the Route*************/
function distanceCalculator(directionsService, directionsRenderer) {
	var origin = document.getElementById('origin').value;
	var destination = document.getElementById('destination').value;
	var req = {
		origin: origin,
		destination: destination,
		travelMode: 'DRIVING'
	};
	directionsService.route(req, function(response, status) {
		if (status === 'OK') {
			directionsRenderer.setDirections(response);
	}
	});
}

Snapshots of the application in desktop and mobile view


NOTE: This is the basic application to integrate google map with UI5 Application.Comment your questions for further details and features you require or want to add to the application 


To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. Sai Sravya

    I followed your process, But still unable to load the google api, Based on u r suggestion  I got the API_KEY. Find the below link which I was consumed in my App.

    ‘https://maps.googleapis.com/maps/api/js?key=AIzaSyC_8vZXS3Ht9L_QdwR8VNmo3x6dy9IXLuI&callback=initMap’

    I am facing the below errors.

     

    Could you please help me on this.

    BestRegards

    Sai Sravya

     

     

     

    (0) 
  2. Jitendra Gupta

    Hi Abhishek,

    We have a requirement to integrate our SAP UI5 application with maps and plot our customers on map. Post that we should be able to select a few customers and we should be able to see optimized route on map and other customers close to that route. Would you have some idea if that is possible?

    Regards

    Jitendra

    (0) 

Leave a Reply