on 01-09-2019 9:39 AM
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.
User | Count |
---|---|
85 | |
23 | |
11 | |
9 | |
8 | |
5 | |
5 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.