Getting data from an array, stuck on the first index

Question

Sorry for the title, didn't know what to write.

I have a google map and I am populating it with markers from a javascript array, the markers have numbers on them and that number is randomly generated with a Math.floor() function.

All works well so far, the markers show in their correct locations each with a random number on it.

The problem is when I click on the marker, I am displaying the country's name and the generated number on it. So for example if the marker over Rome saying "13" the window should say "Rome. There are 13 stories in Rome"

The problem is with the randomly generated number. It always gives me the value of the first country in the array, in this example it's Beirut.

So to recap, let's say Rome has 13 stories and Beirut has 45 stories, when I click on the marker of Rome, I get There are 45 stories

var locations = [
                ['Italy 3', 45.343294, 8.853324, 16],
                ['Italy 2', 44.534529, 10.303519, 15],
                ['Italy 1', 41.416810, 15.313285, 14],
                ['Bulgaria', 42.235462, 23.838675, 13],
                ['Albania', 41.317868, 20.147269, 12],
                ['Turkey 2', 39.714402, 32.803519, 11],
                ['Turkey 1', 37.968918, 29.200003, 10],
                ['Romania 2', 44.251917, 25.464652, 9],
                ['Romania 1', 45.651325, 22.476371, 8],
                ['Bosnia', 43.872979, 17.246879, 7],
                ['Serbia', 43.841292, 20.718558, 6],
                ['Athens', 37.977984, 23.741343, 4],
                ['Istanbul', 41.2440257, 29.0616179, 5],
                ['Rome', 41.851999, 12.555716, 3],
                ['Berlin', 52.481801, 13.291800, 2],
                ['Beirut', 33.787747, 35.796924, 1]
            ];

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

            for (i = 0; i < locations.length; i++) {
                var markernumber = Math.floor((Math.random() * 100) + 1);
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map,
                    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + markernumber + '|F6DD0E|000000'
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(locations[i][0] + '<br>There are ' + markernumber + ' stories.');
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }

Answer 1

You need to include markernumber in the function closure for the marker click event. Change:

google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
    infowindow.setContent(locations[i][0] + '<br>There are ' + markernumber + ' stories.');
    infowindow.open(map, marker);
  }
})(marker, i));

To:

google.maps.event.addListener(marker, 'click', (function(marker, i, markernumber) {
  return function() {
    infowindow.setContent(locations[i][0] + '<br>There are ' + markernumber + ' stories.');
    infowindow.open(map, marker);
  }
})(marker, i, markernumber));

working fiddle

Reference question: Google Maps JS API v3 - Simple Multiple Marker Example (only has closure on marker and i, because that is all it uses)

code snippet:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var locations = [
    ['Italy 3', 45.343294, 8.853324, 16],
    ['Italy 2', 44.534529, 10.303519, 15],
    ['Italy 1', 41.416810, 15.313285, 14],
    ['Bulgaria', 42.235462, 23.838675, 13],
    ['Albania', 41.317868, 20.147269, 12],
    ['Turkey 2', 39.714402, 32.803519, 11],
    ['Turkey 1', 37.968918, 29.200003, 10],
    ['Romania 2', 44.251917, 25.464652, 9],
    ['Romania 1', 45.651325, 22.476371, 8],
    ['Bosnia', 43.872979, 17.246879, 7],
    ['Serbia', 43.841292, 20.718558, 6],
    ['Athens', 37.977984, 23.741343, 4],
    ['Istanbul', 41.2440257, 29.0616179, 5],
    ['Rome', 41.851999, 12.555716, 3],
    ['Berlin', 52.481801, 13.291800, 2],
    ['Beirut', 33.787747, 35.796924, 1]
  ];

  var infowindow = new google.maps.InfoWindow();

  var marker, i;
  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < locations.length; i++) {
    var markernumber = Math.floor((Math.random() * 100) + 1);
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + markernumber + '|F6DD0E|000000'
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i, markernumber) {
      return function() {
        infowindow.setContent(locations[i][0] + '<br>There are ' + markernumber + ' stories.');
        infowindow.open(map, marker);
      }
    })(marker, i, markernumber));
    bounds.extend(marker.getPosition());
  }
  map.fitBounds(bounds);


}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>