CODEWITHSUNDEEP
google-maps-api-3
Mads Lee Jensen
Mads Lee Jensen

Reputation: 4648

Resize markers depending on zoom Google maps v3

I have a Google map running on the v3 API, I added some custom markers, is it possible to make them scale depending on the zoom level of the map? I tried searching the reference but can't seem to find any methods to resize a MarkerImage.

Maybe I have to remove markers everything the map changes zoom and create new markers in a different size?

Upvotes: 22

Views: 38673

Answers (4)

Sigmarod
Sigmarod

Reputation: 87

Addon to Simons answer, as the google maps API has changed with version 3.11

For those who try to implement Simons version here is the marker.setIcon method with the updated API:

//change the size of the icon (until vers. 3.10)
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
    )
); 

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

Changes from version 3.10 to 3.11 as mentioned in Becario Seniors comment.

Upvotes: 1

CrazyEnigma
CrazyEnigma

Reputation: 2824

Unfortunately, you would have to setIcon every single time. However, you can pre-define them, and then just apply them to the marker.

zoomIcons = [null, icon1, icon2];  // No such thing as zoom level 0. A global variable or define within object.
marker.setIcon(zoomIcons[map.getZoom()]);

Upvotes: 12

Simon
Simon

Reputation: 586

This code will resize every time the map is zoomed so it always covers the same geographic area.

//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
        )
    );        
});

Upvotes: 36

Giovanni Gigante
Giovanni Gigante

Reputation: 61

To add to the map an image that follows the zoom level, use a GroundOverlay.

https://developers.google.com/maps/documentation/javascript/groundoverlays

Upvotes: 1

Related Questions