knockout.js - Knockout Click Event for Alternative Routes Google Map API -
knockout.js - Knockout Click Event for Alternative Routes Google Map API -
anyone can help me this.
i'm able show alternative routes sources destination. want highlight route on i've clicked, alter color , on dragging route should give me path. if click on route, before should normal color , selected route should give path on dragging. i've implemented in knockout.
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>directions service</title> <style> html, body, #mapcanvas, #routesingermap { height: 100%; margin: 0px; padding: 0px } #panel { margin: 0px auto; width: 980px; text-align:center; z-index: 5; background-color: #fff; padding: 10px; } .pac-container { z-index: 9999; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"> </script> <script type='text/javascript' src="js/jquery.min.js"></script> <script type='text/javascript' src='js/knockout.js'></script> <script type='text/javascript' src='js/underscore.js'></script> <!--<script type='text/javascript' src='js/knockout.google.maps-0.2.0.debug.js'></script>--> <script type='text/javascript' src='js/ko-googlemap.js'></script> <script type="text/javascript"> var routesinger = ( function (routesinger) { // routesinger google map init method routesinger.gmap = function(){ var self = this; this.init = function(container){ self.gmapinstance = new routesinger.viewmodel(); ko.applybindings(self.gmapinstance, $('#'+container)[0]); self.gmapinstance.applydata(); }; }; // routesinger google map viewmodel routesinger.viewmodel = function(){ var = this; this.countries = { 'in': { center: new google.maps.latlng(22.0, 77.0) } }; this.getsource = ko.observable(); this.getdestination = ko.observable(); this.center = ko.observable(that.countries['in'].center); this.pancenter = ko.observable(true); this.zoom = ko.observable(8); this.maptypeid = ko.observable(google.maps.maptypeid.roadmap); this.bounds = ko.observable(); this.panbounds = ko.observable(true); this.mapinstance = ko.observable(); // computed methods this.onsourcedestinationchanged = ko.computed(function(){ if(that.getsource()){ // } if(that.getdestination()){ } }); // main methods this.showroutes = function(){ // var self = this; // direction service this.directionsservice = new google.maps.directionsservice(); this.main_route = true; this.request = { origin: 'bangalore, karnataka, india', destination: 'jodhpur, rajasthan, india', provideroutealternatives: true, travelmode: google.maps.travelmode[$('#mode').val()], avoidhighways : false, avoidtolls: false }; this.routesingermapdirections = ko.observablearray(); this.directionrenderer = function(result, routetodisplay, map){ var self = this; this.routeindex = ko.observable(routetodisplay); this.polylineoption = { _colour: '', _strokeweight: '', _strokeopacity: '', _suppressmarkers: '', isclickable: true }; this.isdraggable = true; this.isclicked = ko.observable(false); if(routetodisplay==0){ self.polylineoption._colour = '#00458e'; self.polylineoption._strokeweight = 6; self.polylineoption._strokeopacity = 1.0; self.polylineoption._suppressmarkers = false; }else{ self.polylineoption._colour = '#ed1c24'; self.polylineoption._strokeweight = 6; self.polylineoption._strokeopacity = 0.7; self.polylineoption._suppressmarkers = false; } this.directionsrenderer = new google.maps.directionsrenderer({ draggable: self.isdraggable, suppressmarkers: self.polylineoption._suppressmarkers, polylineoptions: { clickable: self.polylineoption.isclickable, strokecolor: self.polylineoption._colour, strokeweight: self.polylineoption._strokeweight, strokeopacity: self.polylineoption._strokeopacity } }); this.directionsrenderer.setmap(map); this.directionsrenderer.setdirections(result); this.directionsrenderer.setrouteindex(routetodisplay); google.maps.event.addlistener(self.polylineoption, 'click', function() { alert(this.strokecolor); }); }; self.directionsservice.route(self.request, function(response, status) { if (status == google.maps.directionsstatus.ok) { if(self.main_route){ (var = 0; < response.routes.length; i++){ console.log(i); self.routesingermapdirections.push(new self.directionrenderer(response, i, that.mapinstance())); } }else{ self.routesingermapdirections.push(new self.directionrenderer(response, routetodisplay, that.mapinstance())); } }else{ alert("unable retrieve route"); } }); }; this.clearroutes = function(){ // }; this.applydata = function(){ //that.rsmap(); }; }; homecoming routesinger; }(routesinger || {})); $(function(){ var gmap = new routesinger.gmap(); gmap.init('routesingermap'); }); </script> </head> <body> <div id="routesingermap"> <div id="panel"> <b>mode of travel: </b> <select id="mode" onchange="calcroute()"> <option value="driving" selected="selected">driving</option> <option value="walking">walking</option> <option value="bicycling">bicycling</option> <option value="transit">transit</option> </select> <b>source: </b> <input placeholder="enter source" type="text" data-bind="autocomplete: getsource" /> <b>destination: </b> <input placeholder="enter destination" type="text" data-bind="autocomplete: getdestination" /> <input type="button" id="route" value="show routes" data-bind="click: showroutes" /> <input type="button" id="clearroute" value="clear route" data-bind="click: clearroutes" /> </div> <div id="directionspanel"></div> <div id="mapcanvas" data-bind="map: $data"></div> </div> </body> </html> here working jsfiddle: http://jsfiddle.net/haridarshan/sm9pr/5/
google-maps-api-3 knockout.js
Comments
Post a Comment