googlemaps info window popup doesn't loading the dynamic content - google-maps

Question

please help me with this issue. I have the following code with working address variable. I tryed to add titles to the Infowindow so when a user clicks on a marker on the map to see some content in popup. Unfortunately, for all popups I can see the same title. I tested, it is a correct js array, but shows only the first titles that comes from the array.. Please help to solve this issue.. Thank you in advance guys !
<script type="text/javascript" charset="utf-8">
var map;
var address = < ? php echo json_encode($adr); ? > ;
var titles = < ? php echo json_encode($ttl); ? > ;
var x = 0;
var nbAddresses = address.length;
var geocoder;
var mark;
var contentString = titles[x];
function init() {
var moptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), moptions);
geocoder = new google.maps.Geocoder();
for (var i = 0; i < nbAddresses; i++) {
geocoder.geocode({
'address': address[i]
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
mark = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: titles[x]
});
map.setCenter(results[0].geometry.location);
x++;
setInfoWindow();
}
});
}
function setInfoWindow() {
google.maps.event.addListener(mark, 'click', function(event) {
var iwindow = new google.maps.InfoWindow();
iwindow.setContent(contentString);
iwindow.open(map, this);
});
}
}
window.onload = init;
</script>

Answer 1

changing
x++;
setInfoWindow(); to
setInfoWindow();
x++;
sets the problem !

Answer 2

At the start of your program you set the contentString to the first element in the title array
var contentString = titles[x];
Then you use this variable inside the setInfoWindow function unchanged.
What if you changed the setInfoWindow to accept a contentString parameter like so
function setInfoWindow(contentString) {...
When you call setInfoWindow, pass in the title.
setInfoWindow(title[x]);
Make sure you increment x after you call this function, so move x++ below setInfoWindow call.
EDIT You will also notice a strange problem from time to time where some titles may appear on the wrong markers. This is because you are doing multiple geocodes at once, and you may get a response out of order.
The following modification would fix that.
for (var i = 0; i < nbAddresses; i++) {
geocoder.geocode({
'address': address[i]
}, return function(x) { // we define a function and call it straight away. The function returns another function which is our callback.
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
mark = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: titles[x]
});
map.setCenter(results[0].geometry.location);
setInfoWindow();
}
}
}(i)); // (i) after the function declaration calls the function and passes in the current value of i
}
So basically what we did here was define a function and run it straight away with the current value of 'i' passed in. The function would then return another function. This function will be run once the goecoding has finished. But now we have a reference to 'i' as it was when the function was defined. So you no longer need to keep a record of x outside this function as x will be equal to i which corresponds with the address passed into geocoder.
This is called a closure.
How do JavaScript closures work?