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/

Because it's not array `marker`; – itzmukeshy7 Apr 05 '16 at 07:19 — itzmukeshy7, Apr 05 '16 at 07:19

duncan · Accepted Answer · 2016-04-05T10:17:59.837

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.

edited Apr 05 '16 at 10:17

answered Apr 05 '16 at 08:55

duncan

31,401
13
78
99

Can you maybe edit it in my fiddle: https://jsfiddle.net/sylvanR/a8z0yyeq/10/ Because it is not working with me – Sireini Apr 05 '16 at 09:06
If i log it i see the right size in console, but the icon is not changing size. – Sireini Apr 05 '16 at 09:07
where do you create `icon1`? You might need to use `marker.setIcon(...)` with a new icon using the size & scaledSize you need, instead of just adjusting the properties directly on the marker's current icon. – duncan Apr 05 '16 at 09:13
It works with marker.setIcon(....) Thanks. But i want to create one variable of icon and than resize that one for cleaner code..\ – Sireini Apr 05 '16 at 09:17
you could create two variables using `icon1` as the origin, setting the relevant sizes, that you then refer to in the setMarkerSize function – duncan Apr 05 '16 at 09:23
I need the code of marker.icon.size = .... because i am checking the id's of the markers to set an other image to it because some of them are rotated houses, to match the map. And if i do it like setIcon(..) all of them change to that image. – Sireini Apr 05 '16 at 09:27
As you can see it is logging => https://jsfiddle.net/sylvanR/a8z0yyeq/15/ but not resizing. Can you please help me out here – Sireini Apr 05 '16 at 09:47
Can you please help me out here @duncan – Sireini Apr 05 '16 at 10:13
@Beginnerprogrammer I've updated the setMarker function in my answer to a way that worked for me. Create a variable in your function, set its size and scaledSize values, then pass it to `marker.setIcon()` – duncan Apr 05 '16 at 10:18
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/108266/discussion-between-beginnerprogrammer-and-duncan). – Sireini Apr 05 '16 at 10:21
can you come in chat again? – Sireini Apr 06 '16 at 15:09

How do i access all my google maps markers

1 Answers1

Linked