I need to draw a path between two cities using GoogleMap in SAPUI5 JS view. also I have latlong inbetween these two cities and need to show a pin point on the path.
attached the screenshot for reference. thanks in Advance...!!!
Message was edited by: AMIT SHARMA below are my view and controller code in VIEW: sap.ui.jsview("schoolMap.MapView", { /** Specifies the Controller belonging to this View. * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller. * @memberOf schoolMap.MapView */ getControllerName : function() { return "schoolMap.MapView"; }, /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. * Since the Controller is given to this method, its event handlers can be attached right away. * @memberOf schoolMap.MapView */ createContent : function(oController) { var currentView = this; currentView.map_canvas = new sap.m.HBox("map_canvas",{ fitContainer:true, justifyContent:"Center", alignItems:"Center", }) ; return new sap.m.Page({ title: "My Route", content: [ new sap.m.Button({text: "GetRouts", width: "9em", press: function(){ } } ), currentView.map_canvas, ] }); } }); in COntroller: sap.ui.controller("schoolMap.MapView", { gloabalMap :null, drawRoutes:function(){ var start = "Bangalore";//document.getElementById('location1').value; var end = "Gurgaon";//document.getElementById('location4').value; var stopages1 = "Ghaziabad";//document.getElementById('location2').value; var stopages2 = "Noida";//document.getElementById('location3').value; //var values=[stopages1, stopages2]; var waypts=[]; // for(var i=0;i<=values.length;i++) // { waypts.push({location:stopages1,stopover:true}); waypts.push({location:stopages2,stopover:true}); // } var request = { origin:start, destination:end, waypoints: waypts, travelMode: google.maps.TravelMode.DRIVING, }; globalModel.directionsService.route(request, function(response, status) { //alert(google.maps.geometry.spherical.computeDistanceBetween(start,end)); if (status == google.maps.DirectionsStatus.OK) { globalModel.directionsDisplay.setDirections(response); } }); }, bindEvents:function(){ document.getElementById("getRoutes").addEventListener("click",this.drawRoutes,this); }, maproutes:[], marker:"", travelPath:"", myMapproperties:{ center:"", zoom:10, // mapTypeId:"hybrid" mapTypeId: google.maps.MapTypeId.ROADMAP }, directionsService:"", directionsDisplay:"", onInit:function(){ if(this.gloabalMap === null){ this.myMapproperties.center = new google.maps.LatLng(28.637493, 77.376408); var that = this; // this.getView().byId("map_canvas").addStyleClass("myMap"); setTimeout(function(){ that.gloabalMap = new google.maps.Map(document.getElementById("map_canvas"),that.myMapproperties); //that.gloabalMap = new google.maps.Map(document.getElementById("map-canvas"),that.myMapproperties); that.marker = new google.maps.Marker({ position:that.myMapproperties.center, }); that.directionsService =new google.maps.DirectionsService(); that.directionsDisplay = new google.maps.DirectionsRenderer(); that.directionsDisplay.setMap(that.gloabalMap); that.bindEvents(); },300); } } });