CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Ecorce
Ecorce

Reputation: 123

API Google map v3 : change markers' size on zoom_changed

I need some help on the Google Maps API v3.

I have a map with markers (which are pictures), informations from a database. The pictures and the map are ok at this time.

I would like to resize the markers when changing the zoom, but my code doesn't work (pictures disappear, replaced by the default icon). Could you help me to see what's wrong ?

Here's my code :

// This part is ok

var marker = new google.maps.Marker({
        map: map,
        icon: new google.maps.MarkerImage("../images/installateurs/<?php echo $row_artisans['photo0']; ?>",
            new google.maps.Size(40, 53.2),
            new google.maps.Point(0, 0),
            new google.maps.Point(0, 0),
            new google.maps.Size(40, 53.2)
        ),
        position: new google.maps.LatLng(<?php echo $row_artisans['Lat']; ?>, <?php echo $row_artisans['Lng']; ?>)
});

// Second part where's the problem (this listener is placed just after creating the map, before rendering it)

google.maps.event.addListener(map, 'zoom_changed', function() {
    var largeur = 20 + (5 *(map.getZoom() - 9));
    var ratio = largeur / 40;
    var hauteur = 26.6 * ratio;

    for(i=0; i< markers.length; i++ ) {
        var icon = markers[i].getIcon();
        markers[i].setIcon(
            icon.url,
            new google.maps.Size(largeur, hauteur),
            new google.maps.Point(0, 0),
            new google.maps.Point(0, 0),
            new google.maps.Size(largeur, hauteur)
        );
    }
});

Thanks for your help !

Upvotes: 2

Views: 7262

Answers (1)

j0nes
j0nes

Reputation: 8099

According to the docs, setIcon either takes a string or a MarkerImage object. Initially you set a MarkerImage, but in your listener code, you do not construct a MarkerImage. Try something like this instead:

    for(i=0; i< markers.length; i++ ) {
    var icon = markers[i].getIcon();
    markers[i].setIcon(new google.maps.MarkerImage(
        icon.url,
        new google.maps.Size(largeur, hauteur),
        new google.maps.Point(0, 0),
        new google.maps.Point(0, 0),
        new google.maps.Size(largeur, hauteur))
    );
}

Upvotes: 2

Related Questions