google maps api 3 - Initializing info window for markers using Javascript -
i have been trying add info windows google maps markers adding dynamically after receiving json array server. issue is, believe, not understanding how javascript handles variables , scope.
i tried code:
$.getjson("server", function(data) { if (data.items.length > 0) { var infowindow = new google.maps.infowindow({ content: "placeholder" }); (var = 0; < data.items.length; i++) { var latlng = new google.maps.latlng(data.items[i]["lat"], data.items[i]["lng"]); var marker = new google.maps.marker({ position: latlng, map: map, title: data.items[i]["text"], icon: data.items[i]["alert_type"], animation: google.maps.animation.drop }); marker.addlistener('click', function() { infowindow.setcontent(data.items[i]["text"]); infowindow.open(map, this); }); } // end } // end if }); // end getjson the problem code when click marker display infowindow, error saying data.items[i] undefined know defined before access several times before line of code (i removed code irrelevant question accesses too).
so, since couldn't access inside function declaration, created var before: var reporttext = data.items[i]["text"]; , inside function changed line problem infowindow.setcontent(reporttext); runs no errors. however, when click marker, show window same text, text last report received instead of being set each 1 individually. assume because infowindow saves variable location instead of string value when set , therefore reads last value set variable.
lastly, tried initialize marker differently:
var marker = new google.maps.marker({ position: latlng, map: map, title: data.items[i]["text"], icon: data.items[i]["alert_type"], label: reporttext, animation: google.maps.animation.drop }); by setting label text want, can do:
infowindow.setcontent(this.label); and expected behavior on infowindow of showing correct text each marker. problem version using custom icons not designed labels, , ugly character inside.
what need either way have label property of marker not show label in marker, or, preferably, way make setcontent copy string value @ time instead of saving reference variable.
any appreciated, thank you.
after looking @ question in first comment @geocodezip , playing around own code managed working version. involves making global array i'm not particularly happy about, has expected behavior. here working version of code:
var texts = []; function makerequest() { $.getjson("server/reports", function(data) { if (data.items.length > 0) { var infowindow = new google.maps.infowindow({ content: "placeholder" }); var text = "<ul>"; (var = 0; < data.items.length; i++) { var reporttext = data.items[i]["text"]; texts.push(reporttext); text += "<li>"; text += data.items[i]["text"] + "<br />"; text += data.items[i]["end_date"]; text += "</li>"; var latlng = new google.maps.latlng(data.items[i]["lat"], data.items[i]["lng"]); var marker = new google.maps.marker({ position: latlng, map: map, title: data.items[i]["text"], icon: data.items[i]["alert_type"], animation: google.maps.animation.drop }); google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { infowindow.setcontent(texts[i]); infowindow.open(map, marker); } })(marker, i)); } // end text += "</ul>" } // end if document.getelementbyid("content").innerhtml = text; }); // end getjson }
Comments
Post a Comment