Changing icon based on zoom level

Question

How do I go about changing an icon height & width based on the Google Maps zoom level?

I'm using Google Maps api v3.

somehow handle some onzoom event and then just change the icon? Dunno, don't work with v3... — Tomas, Aug 12 '11 at 23:25

score 8 · Answer 1 · answered Aug 31 '11 at 12:51

8

This is the code I used eventually:

google.maps.event.addListener(google_map, 'zoom_changed', function() {
    var z = google_map.getZoom();

    _.each(map_shapes, function(s) {

        if (! $.isFunction(s.shape.getPosition)) return;

        var w = s.shape.getIcon().size.width;
        var h = s.shape.getIcon().size.height;

        s.shape.setIcon(new google.maps.MarkerImage(
            s.shape.getIcon().url, null, null, null, new google.maps.Size(
                w - Math.round(w / 3 * (last_zoom - z)),
                h - Math.round(h / 3 * (last_zoom - z)))
            )
        );

    });

    last_zoom = z;
});

answered Aug 31 '11 at 12:51

CamelCamelCamel

5,200
8
61
93

just a note, make sure your new width and height is not below 0, else you get some nasty javascript errors :) always make sure the width and height of the icons is at least 1 – Radek Jun 26 '13 at 16:39
Now `MarkerImage` is just `Icon` since Google Maps API 3.11. It's coole that you have named fields of object, e.g `scaledSize`. See: https://developers.google.com/maps/documentation/javascript/markers#complex_icons – andilabs Aug 17 '14 at 06:42

score 6 · Accepted Answer · answered Aug 12 '11 at 23:29

6

You should be able to add a listener on the zoom change per the docs. It doesnt get passed anything, but you can get the property via the api.

google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomLevel = map.getZoom();
    //this is where you will do your icon height and width change.     
  });

answered Aug 12 '11 at 23:29

Amin Eshaq

4,034
1
17
21

but, how do i change the icon width & height? – CamelCamelCamel Aug 13 '11 at 00:04
which icon are you trying to change? – Amin Eshaq Aug 13 '11 at 00:04
Hey Amin, I don't have a clue how to change an icon width/height. – CamelCamelCamel Aug 13 '11 at 01:44
You can get/set the markerOptions (https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions), the actual icon can be created by using a google.maps.Icon (https://developers.google.com/maps/documentation/javascript/reference#Icon) instead of an image. That google.maps.Icon has 2 nice little properties scaledSize and size. You could mix the answer above and this technique together to change the icon based on zoom, whilst only using 1 image. – dotty Oct 03 '14 at 10:49
Hey dotty, i have tried what you mentioned above and it did not work. Have you had any success doing this? – Travis Michael Heller May 13 '15 at 19:28

score 3 · Answer 3 · answered Nov 14 '12 at 19:09

This code will change the size of the icon every time the zoom level changes so the icon is the same geographic size.

//create a marker image with the path to your graphic and the size of your graphic
var markerImage = new google.maps.MarkerImage(
    'myIcon.png',
    new google.maps.Size(8,8), //size
    null, //origin
    null, //anchor
    new google.maps.Size(8,8) //scale
);

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(38, -98),
    map: map,
    icon: markerImage //set the markers icon to the MarkerImage
});

//when the map zoom changes, resize the icon based on the zoom level so the marker covers the same geographic area
google.maps.event.addListener(map, 'zoom_changed', function() {

    var pixelSizeAtZoom0 = 8; //the size of the icon at zoom level 0
    var maxPixelSize = 350; //restricts the maximum size of the icon, otherwise the browser will choke at higher zoom levels trying to scale an image to millions of pixels

    var zoom = map.getZoom();
    var relativePixelSize = Math.round(pixelSizeAtZoom0*Math.pow(2,zoom)); // use 2 to the power of current zoom to calculate relative pixel size.  Base of exponent is 2 because relative size should double every time you zoom in

    if(relativePixelSize > maxPixelSize) //restrict the maximum size of the icon
        relativePixelSize = maxPixelSize;

    //change the size of the icon
    marker.setIcon(
        new google.maps.MarkerImage(
            marker.getIcon().url, //marker's same icon graphic
            null,//size
            null,//origin
            null, //anchor
            new google.maps.Size(relativePixelSize, relativePixelSize) //changes the scale
        )
    );        
});

Changing icon based on zoom level

3 Answers3

Linked