Skip to Content

How to use Google Map inside SAPUI5 View?

Hi All,

We arr working on Custom SAPUI5 application. I am using sap.f.Flexible Column Layout . in my first view i have input boxes. when i click go, the mod column page will load the map(sap.ui.vbm.Geomap) with spots. when user click the spot i need to call the,third column page to show the route between the user current location and selected spot location.

As a standard way sapui5 vbm controls providing the straight line between the spots. but i want to implement the Google Direction API. By referring some links, i have created a new project. it has gmap.view.html,gmap.controller.js and gmap.js. When i run this project it is working and plotting the direction on the map.

gmap.view.html:

<template data-controller-name="com.geomap_google.controller.gmap">
    <div data-sap-ui-type="sap.m.App">
        <div data-sap-ui-type="sap.m.Page" data-title="Title">
            <div data-sap-ui-aggregation="content">
                <div id="map1" style="height:100%;"></div>
                </div>
                </div>
                </div>
                </template>

gmap.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function (Controller) {
	"use strict";


	return Controller.extend("com.geomap_google.controller.gmap", {


		onInit: function () {
			jQuery.sap.require("com/geomap_google/model/gmap");
		}


	});
});

gmap.js

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


});
var oLatitude;
var oLongitude;


function initMap() {
	alert("Inside callback");
	getLocation();


}


function getLocation() {
	alert("Inside getLocation");
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(showPosition);
	} else {


		alert("Geolocation is not supported by this browser.");
	}


}


function showPosition(position) {


	oLatitude = position.coords.latitude;
	oLongitude = position.coords.longitude;


	calculateAndDisplayRoute();
}


function calculateAndDisplayRoute() {


	var directionsService = new google.maps.DirectionsService;
	var directionsDisplay = new google.maps.DirectionsRenderer;
	var map = new google.maps.Map(document.getElementById('map1'), {
		center: {
			lat: 50.110560,
			lng: 8.674321
		},
		scrollwheel: false,
		zoom: 13
	});


	directionsDisplay.setMap(map);


	var dLatitude = 12.973878;
	var dLongitude = 80.220180;


	directionsService.route({


		origin: {
			lat: 50.109832,
			lng: 8.669552
		},
		destination: {
			lat: 50.107095,
			lng: 8.663239
		},
		travelMode: 'DRIVING'
	}, function (response, status) {
		if (status === 'OK') {
			directionsDisplay.setDirections(response);
		} else {
			window.alert('Directions request failed due to ' + status);
		}
	});
}

But if i try the same in my flexible column layout project, in the third page it is not working. only i can see the title of the HTML view screen. It is not calling the gmap.js,which is located inside the model folder. i put some alerts inside gmap.js, but i did not call.

I am keeping two icon tab bar in my third column page. and i try to call the html view from the seconfd icaon tab.

	<IconTabFilter icon="sap-icon://locate-me" key="gMap">
						
		<mvc:HTMLView viewName="com.hex.zgeo_map_app.view.MapDirection"/>
					</IconTabFilter>

Please help me on this.

Thank you,

Regards,

JK.

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

0 Answers