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

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -