javascript - Adding actionListeners to dynamically created google markers to plot routes -
i have page retrieves locations database , creates markers based on lat/long display on map. markers saved in array , use loop assign onclick action listeners each marker. when user clicks on marker want route current location marker location displayed. issue having regardless of marker clicked, plots route final marker in array.
this map looks 
in above example going click red marker a.
as can see has plotted course marker d.
my code:
//this functions build maps function initializemap(position) { //user location var mycenter = new google.maps.latlng(position.coords.latitude, position.coords.longitude); var mapprop = { center: mycenter, zoom: 13, maptypeid: google.maps.maptypeid.roadmap }; mapobj = new google.maps.map(document.getelementbyid("googlemap"), mapprop); //making sure data array has in if (ajaxresult.length > 0) { (var = 0; < ajaxresult.length; i++) { var pos = {lat: parsefloat(ajaxresult[i][6]), lng: parsefloat(ajaxresult[i][7])}; //building destination markers var suggestionmarker = new google.maps.marker({ position: pos, icon: markernames[i] }); markers.push(suggestionmarker);//adding marker array suggestionmarker.setmap(mapobj);//ading map var userstring = ajaxresult[i][1];//informatino window var infowindow = new google.maps.infowindow({ content: userstring }); infowindow.open(mapobj, suggestionmarker); } addmarkerlisteners(mycenter); } //marker user location var userimage = 'assets/img/googlemapsmarkers/blue_markera.png' var usermarker = new google.maps.marker({ position: mycenter, icon: userimage }); markers.push(usermarker); usermarker.setmap(mapobj); //user information window var userstring = "you!"; var infowindow = new google.maps.infowindow({ content: userstring }); infowindow.open(mapobj, usermarker); } /* * * @param {type} option * @returns {boolean} * accepts user location , adds action listeners each marker * in marker array. action listener calls plot route * function , passes marker position , user position */ function addmarkerlisteners(mycenter) { if(markers.length > 0) { for(var = 0; < markers.length-1; i++) { google.maps.event.addlistener(markers[i],'click', function(){plotroute(markers[i].getposition(),mycenter);}); //markers[i].addeventlistener('click', function(){plotroute(markers[i].getposition(),mycenter);}); directionsdisplay.setmap(mapobj); } } } //creates rout function plotroute(pos, mycenter) { var request = { origin: mycenter, destination: pos, travelmode: 'driving' }; directionsservice.route(request, function(result,status){ if(status === 'ok') { directionsdisplay.setdirections(result); } }); } note actual final marker user marker loop instructed not include it. can see why ever plots route final destination marker in marker array?
this common problem loops setting event listeners. solved in related question: google maps js api v3 - simple multiple marker example using function closure. use solution in code:
function addmarkerlisteners(mycenter) { if (markers.length > 0) { (var = 0; < markers.length; i++) { // function closure on "i" variable google.maps.event.addlistener(markers[i], 'click', (function(i) { return function() { plotroute(markers[i].getposition(), mycenter); }})(i)); directionsdisplay.setmap(mapobj); } } } to solve without function closure, use this inside event handler function, refers marker clicked:
function addmarkerlisteners(mycenter) { if (markers.length > 0) { (var = 0; < markers.length; i++) { google.maps.event.addlistener(markers[i], 'click', function() { plotroute(this.getposition(), mycenter); }); directionsdisplay.setmap(mapobj); } } } code snippet (using function closure):
var geocoder; var map; var markers = []; var directionsdisplay = new google.maps.directionsrenderer(); var directionsservice = new google.maps.directionsservice(); function initialize() { // googleplex 37.4223434, -122.0843689 var position = {coords: {latitude:37.4223434, longitude:-122.0843689}} initializemap(position); } google.maps.event.adddomlistener(window, "load", initialize); // menlo park, ca, usa (37.4529598, -122.18172520000002) // mountain view, ca, usa (37.3860517, -122.0838511) var ajaxresult = [[0,"infowindow 0",2,3,4,5,37.4419,-122.1419], [1,"infowindow 1",2,3,4,5,37.4529598,-122.1817252],[2,"infowindow 2",2,3,4,5,37.3860517,-122.0838511]] //this functions build maps function initializemap(position) { //user location var mycenter = new google.maps.latlng(position.coords.latitude, position.coords.longitude); var mapprop = { center: mycenter, zoom: 13, maptypeid: google.maps.maptypeid.roadmap }; mapobj = new google.maps.map(document.getelementbyid("googlemap"), mapprop); //making sure data array has in if (ajaxresult.length > 0) { (var = 0; < ajaxresult.length; i++) { var pos = { lat: parsefloat(ajaxresult[i][6]), lng: parsefloat(ajaxresult[i][7]) }; //building destination markers var suggestionmarker = new google.maps.marker({ position: pos, // icon: markernames[i] }); markers.push(suggestionmarker); //adding marker array suggestionmarker.setmap(mapobj); //ading map var userstring = ajaxresult[i][1]; //informatino window var infowindow = new google.maps.infowindow({ content: userstring }); infowindow.open(mapobj, suggestionmarker); } addmarkerlisteners(mycenter); } //marker user location var userimage = 'http://maps.google.com/mapfiles/ms/micons/blue.png' var usermarker = new google.maps.marker({ position: mycenter, icon: userimage }); markers.push(usermarker); usermarker.setmap(mapobj); //user information window var userstring = "you!"; var infowindow = new google.maps.infowindow({ content: userstring }); infowindow.open(mapobj, usermarker); } /* * * @param {type} option * @returns {boolean} * accepts user location , adds action listeners each marker * in marker array. action listener calls plot route * function , passes marker position , user position */ function addmarkerlisteners(mycenter) { if (markers.length > 0) { (var = 0; < markers.length; i++) { google.maps.event.addlistener(markers[i], 'click', (function(i) { return function() { plotroute(markers[i].getposition(), mycenter); }})(i)); directionsdisplay.setmap(mapobj); } } } //creates route function plotroute(pos, mycenter) { var request = { origin: mycenter, destination: pos, travelmode: 'driving' }; directionsservice.route(request, function(result, status) { if (status === 'ok') { directionsdisplay.setdirections(result); } else alert("directions request failed: "+status); }); }html, body, #googlemap { height: 100%; width: 100%; margin: 0px; padding: 0px }<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="googlemap"></div>code snippet (using this):
var geocoder; var map; var markers = []; var directionsdisplay = new google.maps.directionsrenderer(); var directionsservice = new google.maps.directionsservice(); function initialize() { // googleplex 37.4223434, -122.0843689 var position = {coords: {latitude:37.4223434, longitude:-122.0843689}} initializemap(position); } google.maps.event.adddomlistener(window, "load", initialize); // menlo park, ca, usa (37.4529598, -122.18172520000002) // mountain view, ca, usa (37.3860517, -122.0838511) var ajaxresult = [[0,"infowindow 0",2,3,4,5,37.4419,-122.1419], [1,"infowindow 1",2,3,4,5,37.4529598,-122.1817252],[2,"infowindow 2",2,3,4,5,37.3860517,-122.0838511]] //this functions build maps function initializemap(position) { //user location var mycenter = new google.maps.latlng(position.coords.latitude, position.coords.longitude); var mapprop = { center: mycenter, zoom: 13, maptypeid: google.maps.maptypeid.roadmap }; mapobj = new google.maps.map(document.getelementbyid("googlemap"), mapprop); //making sure data array has in if (ajaxresult.length > 0) { (var = 0; < ajaxresult.length; i++) { var pos = { lat: parsefloat(ajaxresult[i][6]), lng: parsefloat(ajaxresult[i][7]) }; //building destination markers var suggestionmarker = new google.maps.marker({ position: pos, // icon: markernames[i] }); markers.push(suggestionmarker); //adding marker array suggestionmarker.setmap(mapobj); //ading map var userstring = ajaxresult[i][1]; //informatino window var infowindow = new google.maps.infowindow({ content: userstring }); infowindow.open(mapobj, suggestionmarker); } addmarkerlisteners(mycenter); } //marker user location var userimage = 'http://maps.google.com/mapfiles/ms/micons/blue.png' var usermarker = new google.maps.marker({ position: mycenter, icon: userimage }); markers.push(usermarker); usermarker.setmap(mapobj); //user information window var userstring = "you!"; var infowindow = new google.maps.infowindow({ content: userstring }); infowindow.open(mapobj, usermarker); } /* * * @param {type} option * @returns {boolean} * accepts user location , adds action listeners each marker * in marker array. action listener calls plot route * function , passes marker position , user position */ function addmarkerlisteners(mycenter) { if (markers.length > 0) { (var = 0; < markers.length; i++) { google.maps.event.addlistener(markers[i], 'click', function() { plotroute(this.getposition(), mycenter); }); directionsdisplay.setmap(mapobj); } } } //creates rout function plotroute(pos, mycenter) { var request = { origin: mycenter, destination: pos, travelmode: 'driving' }; directionsservice.route(request, function(result, status) { if (status === 'ok') { directionsdisplay.setdirections(result); } }); }html, body, #googlemap { height: 100%; width: 100%; margin: 0px; padding: 0px }<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="googlemap"></div>
Comments
Post a Comment