Reputation: 995
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.
Upvotes: 0
Views: 907
Reputation: 161404
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);
});
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>
Upvotes: 2