Adding google.maps.event.addListener in a loop with named function

Question

I appreciate there is a common issue with scoping in loops within javascript, but I can't work out this particular issue. I have a loop of click listeners to add to my map, I want to call a function to do it:

function addInfoListener(name,map){
        var infowindow = new google.maps.InfoWindow({
            content: "<p>"+name+"</p>",
        });
        google.maps.event.addListener(map, 'click', function(e) {
            infoWindow.setPosition(e.latLng);
            infowindow.open(map);
        });                     
    }

$.each(polygons, function(index, value){
            addInfoListener(controller.getCragName(index),map);
});

However the click listener doesn't seem to get created. If I do it in an anonymous function it works as expected:

$.each(polygons, function(index, value){
        google.maps.event.addListener(value, 'click', function(e){infoWindow.setContent("<p>"+controller.getCragName(index)+"</p>");                                                                     
                                                                 infoWindow.setPosition(e.latLng);});
        infoWindow.open(this.map);                                                                          
    });

The complete problem is described in this JSFiddle with the preferred solution commented out (as it is it works as I'd like). Can you help me to rewrite this part of the code in an accepted manner.

http://jsfiddle.net/eatxt3od/

Answer 1

1. you need to listen for clicks on the polygons, not on the map

2. javascript is case sensitive (infoWindow and infowindow are different)

   function addInfoListener(polygon, name, map) {
       var infowindow = new google.maps.InfoWindow({
           content: "<p>" + name + "</p>"
       });
       google.maps.event.addListener(polygon, 'click', function (e) {
           infowindow.setPosition(e.latLng);
           infowindow.open(map);
       });
       console.dir(map);
   }
   
   $.each(polygons, function (index, value) {
       addInfoListener(value, controller.getCragName(index), map);
   });
   

working fiddle

code snippet:

/*
 * declare map as a global variable
 */
var map;

/* ======= Model ======= */

var model = {

  crags: [{
    name: "Stanage",
    cragColor: "'#FF0000'",
    coords: [new google.maps.LatLng(53.360470, -1.646050),
      new google.maps.LatLng(53.359523, -1.647895),
      new google.maps.LatLng(53.351006, -1.637123),
      new google.maps.LatLng(53.351364, -1.627167)
    ]
  }, {
    name: "Burbage",
    cragColor: "'#00AA00'",
    coords: [new google.maps.LatLng(53.341489, -1.606224),
      new google.maps.LatLng(53.338148, -1.605190),
      new google.maps.LatLng(53.338145, -1.600849),
      new google.maps.LatLng(53.341501, -1.604020)
    ]
  }, {
    name: "Higgar",
    cragColor: "'#0000BB'",
    coords: [new google.maps.LatLng(53.340912, -1.611288),
      new google.maps.LatLng(53.338048, -1.612833),
      new google.maps.LatLng(53.339762, -1.608670)
    ]
  }]
};

/* ======= Controller ======= */

var controller = {

  init: function() {

    mapView.init();
  },

  getStanageCoords: function() {
    return model.stanageCoords;
  },

  getBurbageCoords: function() {
    return model.burbageCoords;
  },

  getCrags: function() {
    return model.crags;
  },

  getCragName: function(index) {
    return model.crags[index].name;
  }
};

/* ======= View ======= */
var mapView = {
  polygons: [],

  init: function() {
    this.drawMap();
    this.render();
  },

  render: function() {
    console.log("Rendering map view");
  },

  drawMap: function() {
    var polygons = new Array();
    var infoWindow = new google.maps.InfoWindow();

    var map = new google.maps.Map(document.getElementById("map_view"), {
      center: new google.maps.LatLng(53.3472915, -1.633261),
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    $.each(controller.getCrags(), function(index, value) {
      var polygon = new google.maps.Polygon({
        paths: value.coords,
        strokeColor: value.cragColor,
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: value.cragColor,
        fillOpacity: 0.35
      });
      polygons.push(polygon);
      polygon.setMap(map);

    });

    function addInfoListener(polygon, name, map) {
      var infowindow = new google.maps.InfoWindow({
        content: "<p>" + name + "</p>"
      });
      google.maps.event.addListener(polygon, 'click', function(e) {
        infowindow.setPosition(e.latLng);
        infowindow.open(map);
      });
      console.dir(map);
    }

    $.each(polygons, function(index, value) {
      addInfoListener(value, controller.getCragName(index), map);
    });
  }
};
google.maps.event.addDomListener(window, "load", function() {
  controller.init();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_view" style="height: 800px; width: 800px;"></div>