javascript - Array only retriving first LatLng data from multiple locations an passes same all time to infowindow content -
ok problem facing trying retrive "latlng" array "locations" variable "tere" (sitelatlng). way shows value of first latlng value , keeps adding every marker. need passes "latlng" correspondant marker. appreciated. :)
this code markers:
var markers = []; function initmap() { var directionsdisplay = new google.maps.directionsrenderer; var directionsservice = new google.maps.directionsservice; var guanajuato = new google.maps.latlng(21.0158803, -101.2540116); var map = new google.maps.map(document.getelementbyid('map'), { center: guanajuato, zoom: 16 }); var locations = [ ['ocho', 21.017137, -101.253186, 1], ['siete', 21.017119, -101.252922, 2], ['seis', 21.017154, -101.253055, 3], ['cinco', 21.017444, -101.253144, 4], ]; var marker, i; var infowindow = new google.maps.infowindow(); google.maps.event.addlistener(map, 'click', function() { infowindow.close(); }); (i = 0; < locations.length; i++) { var sitelatlng = new google.maps.latlng (locations[i][1], locations[i][2]); var tere = ['sipissss'+'<div id="ddircontainer">'+ '<div id="ddirdiv"><a id="drivingdirectionslink" target="_blank" href="https://maps.google.com/maps?saddr=my%20location&' + 'daddr=' + sitelatlng +'">' + '<img src="img/car_vehicle.png" width="25" height="25" />' + '</a></div>'+ '</div>']; marker = new google.maps.marker({ position:sitelatlng, map: map, animation: google.maps.animation.drop }); markers.push(marker); google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { infowindow.setcontent(locations[i][0] + locations[i][1] + locations[i][2] + tere ); infowindow.open(map, marker); } })(marker, i));} } google.maps.event.adddomlistener(window, 'load', initmap);
the issue aren't getting function closure on tere
variable, pointing last value set to. add function closure click
listener function:
google.maps.event.addlistener(marker, 'click', (function(marker, i, tere) { return function() { infowindow.setcontent(locations[i][0] + locations[i][1] + locations[i][2] + tere); infowindow.open(map, marker); } })(marker, i, tere));
code snippet:
var markers = []; function initmap() { var directionsdisplay = new google.maps.directionsrenderer; var directionsservice = new google.maps.directionsservice; var guanajuato = new google.maps.latlng(21.0158803, -101.2540116); var map = new google.maps.map(document.getelementbyid('map'), { center: guanajuato, zoom: 16 }); var locations = [ ['ocho', 21.017137, -101.253186, 1], ['siete', 21.017119, -101.252922, 2], ['seis', 21.017154, -101.253055, 3], ['cinco', 21.017444, -101.253144, 4], ]; var marker, i; var infowindow = new google.maps.infowindow(); google.maps.event.addlistener(map, 'click', function() { infowindow.close(); }); (i = 0; < locations.length; i++) { var sitelatlng = new google.maps.latlng(locations[i][1], locations[i][2]); var tere = ['sipissss' + '<div id="ddircontainer">' + '<div id="ddirdiv"><a id="drivingdirectionslink" target="_blank" href="https://maps.google.com/maps?saddr=my%20location&' + 'daddr=' + sitelatlng + '">' + '<img src="https://s3.amazonaws.com/images.seroundtable.com/google-maps-iphone-icon-1355404686.png" width="25" height="25" />' + '</a></div>' + '</div>' ]; marker = new google.maps.marker({ position: sitelatlng, map: map, animation: google.maps.animation.drop }); markers.push(marker); google.maps.event.addlistener(marker, 'click', (function(marker, i, tere) { return function() { infowindow.setcontent(locations[i][0] + locations[i][1] + locations[i][2] + tere); infowindow.open(map, marker); } })(marker, i, tere)); } } google.maps.event.adddomlistener(window, 'load', initmap);
html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map"></div>
Comments
Post a Comment