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.


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


], function (Controller) {
	"use strict";

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

		onInit: function () {"com/geomap_google/model/gmap");



window.addEventListener('load', function () {
	alert("Inside oninit");
	var script = document.createElement('script');
	script.type = 'text/javascript';
	script.src =

var oLatitude;
var oLongitude;

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


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

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


function showPosition(position) {

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


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


	var dLatitude = 12.973878;
	var dLongitude = 80.220180;


		origin: {
			lat: 50.109832,
			lng: 8.669552
		destination: {
			lat: 50.107095,
			lng: 8.663239
		travelMode: 'DRIVING'
	}, function (response, status) {
		if (status === 'OK') {
		} 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"/>

Please help me on this.

Thank you,



Add comment
10|10000 characters needed characters exceeded

0 Answers