Issue placing InfoWindows on Google Map markers

Question

I'm trying to place multiple markers on a Google Map using JSON with InfoWindows bound to each marker. Unfortunately, only one marker appears, which is the last value in the JSON. No other marker will show and the comic balloon-style arrow doesn't appear trailing from the InfoWindow. Have tried for quite a while to resolve this but nothing appears to work.

This is the code:

var stories = {{story_Json|safe}};

var map;


function loadMarkers(stories){
    for (i=0;i<stories.length;i++) {
        var story = stories[i];
        var point = new google.maps.LatLng(story.latitude, story.longitude);
        var marker = new google.maps.Marker({position: point, map: map});
        var infowindow = new google.maps.InfoWindow({
            content: '<div >'+
                '<div >'+
                '</div>'+
                '<h2 class="firstHeading">'+story.headline+'</h2>'+
                '<div>'+
                '<p>'+story.copy+'</p>'+

                '</div>'+
                '</div>'

        });
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });

    }
}


 function mainMap(position)
 {
       // Define the coordinates as a Google Maps LatLng Object
       var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

       // Prepare the map options
       var mapOptions =
      {
                  zoom: 15,
                  center: coords,
                  mapTypeControl: false,
                  navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                  mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // Create the map, and place it in the map_canvas div
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        // Place the initial marker
        var marker = new google.maps.Marker({
                  position: coords,
                  map: map,
                  title: "Your current location!"
        });

        loadMarkers(stories);

    }

Any insight into these issues much appreciated.

Answer 1

InfoWindow is keeping a reference using the last value of i (since the loop ended, we see the last value of the JSON). This has to do with function scope in Javascript rather than block scope.

One way to get the desired results is to introduce a new story to reference each of the values of stories for each infowindow. This can be done with a new anonymous function scope:

function loadMarkers(stories){
    for (i=0;i<stories.length;i++) {
        var story = stories[i];

        (function(story) {
          var point = new google.maps.LatLng(story.latitude, story.longitude);
          var marker = new google.maps.Marker({position: point, map: map});
          var infowindow = new google.maps.InfoWindow({
            content: '<div >'+
                '<div >'+
                '</div>'+
                '<h2 class="firstHeading">'+story.headline+'</h2>'+
                '<div>'+
                '<p>'+story.copy+'</p>'+

                '</div>'+
                '</div>'

          });
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,this);
          });
        })(story);
    }
}

Forgot about the infowindow arrow, is it displayed incorrectly, like blurred or deformed? Maybe it's a CSS thing, adding these lines may help you.

#map_canvas label { width: auto; display:inline; }
#map_canvas img { max-width: none; max-height: none; }