javascript - How to link each Marker with it's own infoWindow? -
as can see, i'm iterating json object containing markers info, this:
( i'm using infobox plugin, it's not relevant question)
function drawairports() { var markers = []; if ( markers != undefined) { (var = 0; < markers.length; i++ ) { markers[i].setmap(null); } markers.length = 0; } var json = [ {"id":8585885,"airport":"airport name", "lat" : "1.3", "long" : "1.33"}, {"id":8585886,"airport":"airport name 1", "lat" : "-1.3", "long" : "1.33"}, {"id":8585886,"airport":"airport name 2", "lat" : "42.5000", "long" : "1.5000"}, {"id":8585886,"airport":"airport name 3", "lat" : "24.0000", "long" : "54.0000"}, {"id":8585886,"airport":"airport name 4", "lat" : "17.0500", "long" : "-61.8000"}, {"id":8585886,"airport":"airport name 5", "lat" : "18.2500", "long" : "-63.1667"}, {"id":8585886,"airport":"airport name 6", "lat" : "24.0000", "long" : "54.0000"}, {"id":8585886,"airport":"airport name 7", "lat" : "41.0000", "long" : "20.0000"}, {"id":8585886,"airport":"airport name 8", "lat" : "40.0000", "long" : "45.0000"}, {"id":8585886,"airport":"airport name 9", "lat" : "12.2500", "long" : "-68.7500"}, {"id":8585886,"airport":"airport name 10", "lat" : "-12.5000", "long" : "18.5000"}, {"id":8585886,"airport":"airport name 11", "lat" : "35.0000", "long" : "105.0000"}, {"id":8585886,"airport":"airport name 12", "lat" : "-90.0000", "long" : "0.0000"}, {"id":8585886,"airport":"airport name 13", "lat" : "34.0000", "long" : "-64.0000"}, {"id":8585886,"airport":"airport name 14", "lat" : "-14.3333", "long" : "-170.0000"}, {"id":8585886,"airport":"airport name 15", "lat" : "47.3333", "long" : "13.3333"}, {"id":8585886,"airport":"airport name 16", "lat" : "-27.0000", "long" : "133.0000"}, {"id":8585886,"airport":"airport name 17", "lat" : "12.5000", "long" : "-69.9667"} ]; var airports = eval(json); (var = 0; < airports.length; i++) { var airport = airports[i]; var marker = new google.maps.marker({ position: new google.maps.latlng(airport.lat, airport.long), map: map, title: airport.airport, icon: 'img/gmaps/marker.png', visible: true }); infobox = new infobox({ content: '<h3>'+airport.airport+'</h3><a class="info" href="">información</a><a class="bags" href="">equipajes</a>', disableautopan: false, maxwidth: 150, pixeloffset: new google.maps.size(-212, -150), zindex: null, boxstyle: { width: "280px" }, closeboxmargin: "0", closeboxurl: "img/gmaps/close.png", infoboxclearance: new google.maps.size(1, 1) }); google.maps.event.addlistener(marker, 'click', function() { infobox.open(map, this); map.panto(loc); }); markers.push(marker); } } my problem each marker open last ( number 17 ) infowindow,
what doing wrong?
so problem not google maps api utilization, or library, way use closures. have global variable infobox, fine since want 1 infobox , close infobox present on map before opening new one, way have infobox points last 1 created, number 17, last location. use javascript closure , and create infobox inside listener code, leveraging fact airport contains correct data because of closure. should work:
function drawairports() { var markers = []; var infobox = new infobox({ content: '', disableautopan: false, maxwidth: 150, pixeloffset: new google.maps.size(-212, -150), zindex: null, boxstyle: { width: "280px" }, closeboxmargin: "0", closeboxurl: "img/gmaps/close.png", infoboxclearance: new google.maps.size(1, 1) }); if (markers != undefined) { (var = 0; < markers.length; i++) { markers[i].setmap(null); } markers.length = 0; } var json = [ {"id": 8585885, "airport": "airport name", "lat": "1.3", "long": "1.33"}, {"id": 8585886, "airport": "airport name 1", "lat": "-1.3", "long": "1.33"}, {"id": 8585886, "airport": "airport name 2", "lat": "42.5000", "long": "1.5000"}, {"id": 8585886, "airport": "airport name 3", "lat": "24.0000", "long": "54.0000"}, {"id": 8585886, "airport": "airport name 4", "lat": "17.0500", "long": "-61.8000"}, {"id": 8585886, "airport": "airport name 5", "lat": "18.2500", "long": "-63.1667"}, {"id": 8585886, "airport": "airport name 6", "lat": "24.0000", "long": "54.0000"}, {"id": 8585886, "airport": "airport name 7", "lat": "41.0000", "long": "20.0000"}, {"id": 8585886, "airport": "airport name 8", "lat": "40.0000", "long": "45.0000"}, {"id": 8585886, "airport": "airport name 9", "lat": "12.2500", "long": "-68.7500"}, {"id": 8585886, "airport": "airport name 10", "lat": "-12.5000", "long": "18.5000"}, {"id": 8585886, "airport": "airport name 11", "lat": "35.0000", "long": "105.0000"}, {"id": 8585886, "airport": "airport name 12", "lat": "-90.0000", "long": "0.0000"}, {"id": 8585886, "airport": "airport name 13", "lat": "34.0000", "long": "-64.0000"}, {"id": 8585886, "airport": "airport name 14", "lat": "-14.3333", "long": "-170.0000"}, {"id": 8585886, "airport": "airport name 15", "lat": "47.3333", "long": "13.3333"}, {"id": 8585886, "airport": "airport name 16", "lat": "-27.0000", "long": "133.0000"}, {"id": 8585886, "airport": "airport name 17", "lat": "12.5000", "long": "-69.9667"} ]; var airports = eval(json); (var = 0; < airports.length; i++) { (function (airport) { var marker = new google.maps.marker({ position: new google.maps.latlng(airport.lat, airport.long), map: map, title: airport.airport, icon: 'img/gmaps/marker.png', visible: true }); google.maps.event.addlistener(marker, 'click', function () { infobox.setcontent('<h3>' + airport.airport + '</h3><a class="info" href="">información</a><a class="bags" href="">equipajes</a>'); infobox.open(map, this); }); markers.push(marker); })(airports[i]); } }
Comments
Post a Comment