for (i = 0; i < locations.length; i++) {
var image = new google.maps.MarkerImage(
'logo.png',
null, // size
new google.maps.Point( 0, 0 ), // origin
new google.maps.Point( 24, 48 ), // anchor (move to center of marker)
new google.maps.Size( 48, 48 ) // scaled size (required for Retina display icon)
);
marker = new google.maps.Marker({
icon: image,
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
flat: true,
optimized: false,
map: map,
visible: true,
customInfo: locations[i][0]
});
google.maps.event.addListener(marker, 'click', function() {
alert('hello');
console.log(this);
map.setZoom(17);
map.setCenter(this.getPosition());
for (let j = 0; j < markers.length; j++) {
markers[j].setClickable(false);
}
$('#map').append('<div class="reset" id="reset">Reset</div>');
var office;
if (this.customInfo == "Town A"){
office = $('.city-a').html();
} else {
office = $('.city-b').html();
}
$('#map').append('<div class="office" id="office">'+office+'</div>');
var reset = document.getElementById('reset');
google.maps.event.addDomListener(reset, 'click', function() {
map.setZoom(9);
map.setCenter(new google.maps.LatLng(54.403758,-2.566102));
$('#reset, #office').remove();
for (let k = 0; k < markers.length; k++) {
markers[k].setClickable(true);
}
});
});
}
Through the code snippet above, I am able to plot multiple markers on a map successfully. However, my attempt to make all markers non-clickable using marker.setClickable(false); only affects the last plotted marker.
I would appreciate guidance on improving the code to ensure that all markers become non-clickable when
google.maps.event.addListener(marker, 'click', function() {Thank you in advance.