javascript - How do i access all my google maps markers

Question

I am not seeing it i'll think if one of you looks at it can immediately tell me what i have to do. Now i resize my marker but it only takes the last marker of the array.

here the code I'll loop trough the array of object markers:

var locations = [
    [{id: 1, lat: 51.523229192354066, lng: 5.139241042480535, content: 'Title A'}],
    [{id: 2, lat: 51.52309568310267, lng:  5.139251771316594, content: 'Title B'}],
    [{id: 3, lat: 51.5229888754197, lng:  5.139434161529607, content: 'Title C'}],
    [{id: 4, lat: 51.52284868995566,  lng:  5.139487805709905, content: 'Title D'}],
    [{id: 5, lat: 51.522715179588666,  lng:  5.139670195922918, content: 'Title E'}],
    [{id: 6, lat: 51.52258166883027,  lng:  5.1397989419556325, content: 'Title F'}],
    [{id: 7, lat: 51.52242813097418,  lng:  5.139927687988347, content: 'Title G'}],
    [{id: 8, lat: 51.52227793039666,  lng:   5.139927687988347, content: 'Title H'}],
    [{id: 9, lat: 51.522625059869696, lng:     5.138688507423467, content: 'Title I'}]
];

for (i = 0; i < locations.length; i++) {
        var myLatLng = {lat: locations[i][0].lat, lng: locations[i][0].lng};

    marker = new google.maps.Marker({
        position: myLatLng,
        icon: icon1,
        map: map
    });


    map.addListener('zoom_changed', function() {
        if (map.getZoom() === 17) {
            marker.icon.scaledSize = new google.maps.Size(32, 32);
            marker.icon.size = new google.maps.Size(32, 32);
            marker.setMap(map);
        }
        if (map.getZoom() === 18) {
            console.log(marker[i]);
            marker.icon.scaledSize = new google.maps.Size(90, 90);
            marker.icon.size = new google.maps.Size(90, 90);
            marker.setMap(map);
        }
    });

If i try to access marker[i].icon it is undefined. Please can somebody help me out to use size ALL the markers.

Here is a fiddle for a better view zoom in and out to see what happens only one marker change in size: https://jsfiddle.net/sylvanR/a8z0yyeq/10/

Answer 1

The problem is this: you're looping over all your markers, adding a new event listener for the map's zoom_changed event. In each of those event listeners, you're referring to the variable marker. This event listener function doesn't get executed at the moment you define it, it only happens when the zoom changes obviously. So at that point, the variable marker will equal whatever it was at the very last iteration of your for loop.

Instead you need to change how you setup this event listener, something like this:

for (i = 0; i < locations.length; i++) {
        var myLatLng = {lat: locations[i][0].lat, lng: locations[i][0].lng};

    marker = new google.maps.Marker({
        position: myLatLng,
        icon: icon1,
        map: map
    });

    setMarkerSize(marker);
}

function setMarkerSize(marker) {
    var icon = marker.icon;
    map.addListener('zoom_changed', function() {
        if (map.getZoom() === 16) {
            icon.scaledSize = new google.maps.Size(15, 15);
            icon.size = new google.maps.Size(15, 15);
            marker.setIcon(icon);
            console.log(marker.icon.size);
        }
        if (map.getZoom() === 17) {
            icon.scaledSize = new google.maps.Size(32, 32);
            icon.size = new google.maps.Size(32, 32);
            marker.setIcon(icon);
            console.log(marker.icon.size);
        }
        if (map.getZoom() === 18) {
            icon.scaledSize = new google.maps.Size(90, 90);
            icon.size = new google.maps.Size(90, 90);
            marker.setIcon(icon);
            console.log(marker.icon.size);
        }
    });
}

In this case, marker inside the setMarkerSize function is a local variable that will be different each time you call the function.