Selecting all of Google Map markers

Question

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());
        marker.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();
            marker.setClickable (true);
        });
    });
}

Using the above I am able to plot markers which is fine but I have tried to make all markers non-clickable by using marker.setClickable (false); but this only changes the last plotted marker.

Would someone be able to point out where I could improve the code to make all markers non-clickable when google.maps.event.addListener(marker, 'click', function() { is run.

Thanks in advance

Answer 1

Check about closures in javascript. Below is a version that should work.

function setEventListener(marker) {
    google.maps.event.addListener(marker, 'click', function() {
        alert('hello');
        console.log(this);
        map.setZoom(17);
        map.setCenter(this.getPosition());
        marker.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();
            marker.setClickable (true);
        });
    });
}

---

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]
    });
    setEventListener(marker);
}

---

Second solution

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(marker) {
        return function() {
            alert('hello');
            console.log(this);
            map.setZoom(17);
            map.setCenter(this.getPosition());
            marker.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();
                marker.setClickable (true);
            });
        }
    })(marker));    
}