Albert Albert - 17 days ago 7
Javascript Question

Changing marker at certain zoom level - Google Maps API 3

I have a map that loads and displays (correctly) a bunch of markers. The amount of markers are unlimited, so they are created before the map is initialized by running a bit of PHP in the javascript (the markers come from a database).

I want to know, if it is possible to change the marker from a simple dot, to something else when a certain zoom level is reached?

Here is some code:

<script>
var <?php echo $clinic_string; ?>; //string with marker names
var map;

function initialize() {
var kzn = new google.maps.LatLng(-28.459033,30.217037);
var mapOptions = {
zoom: 7,
center: kzn,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

<?php foreach($jsdata as $data) : ?>
marker_<?php echo $data['id'];?> = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $data['location'];?>),
map: map,
icon: 'images/reddot.gif'
});
<?php endforeach; ?>
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>


Let's say my zoom level reaches level 15, it needs to change the
icon
to
images/clinic.gif
.

Is this possible? And if so, how can I achieve this?

Answer

Not too hard. You need an event listener for the map object's zoom_changed event. And you can change the markers icons using the marker's setIcon function. Something like:

    <?php foreach($jsdata as $data) : ?>
        marker_<?php echo $data['id'];?> = new google.maps.Marker({
            position: new google.maps.LatLng(<?php echo $data['location'];?>),
            map: map,
            icon: 'images/reddot.gif'
        });

        map.addListener('zoom_changed', function() {
            if (map.getZoom() >= 15) {
                marker_<?php echo $data['id'];?>.setIcon('images/clinic.gif');
            } else {    // assuming you want to change it back if they zoom back out
                marker_<?php echo $data['id'];?>.setIcon('images/reddot.gif');
            }
        });
    <?php endforeach; ?>

In fact rather than have X number of 'zoom_changed' event listeners, I think I'd rather have one array for all my markers. Then just have one event listener function, which loops over all those markers.

    markers = [];

    <?php foreach($jsdata as $data) : ?>
        marker_<?php echo $data['id'];?> = new google.maps.Marker({
            position: new google.maps.LatLng(<?php echo $data['location'];?>),
            map: map,
            icon: 'images/reddot.gif'
        });

        markers.push(marker_<?php echo $data['id'];?>);
    <?php endforeach; ?>

    map.addListener('zoom_changed', function() {
        var image;
        if (map.getZoom() >= 15) {
            image = 'images/clinic.gif';
        else {  // assuming you want to change it back if they zoom back out
            image = 'images/reddot.gif';
        }

        for (var i = 0; i < markers.length; i++) {
            markers[i].setIcon(image);
        }
    });
Comments