CODEWITHSUNDEEP
javascriptgoogle-mapssvggoogle-maps-api-3
Jordi Castilla
Jordi Castilla

Reputation: 27003

Responsive svg marker icons in googlemaps

I have a map (example here), with customized svg icon markers:

var icon = {
  path: "M-10,0a10,10 0 1,0 20,0a10,10 0 1,0 -20,0",
  fillColor: '#FF0000',
  fillOpacity: .6,
  anchor: new google.maps.Point(0, 0),
  strokeWeight: 0,
  scale: 1
}

If you zoom in the map you will realize icon is immutable size,

enter image description here enter image description here

there is a way to resize it when zooming? (zoom in makes icon bigger and zoom out smaller)

Upvotes: 0

Views: 1879

Answers (1)

Joyson
Joyson

Reputation: 3040

From your initialize method you can call the setZoomChangedEvent method as given below. This is just for proof of concept. You will need to decide the scale that you want depending on the zoom level and change the value of the variable "scale" inside the if-else-if ladder. The method checks the zoom level every time the zoom is changed and the scale is calculated according to the zoom. As geocodezip has mentioned in the comments there could be an impact on performance if there are a lot of markers on the map.

function setZoomChangedEvent()
{
    var prevscale = 3;
    var scale = 0;
    google.maps.event.addListener(map, 'zoom_changed', function() {

        var zoom = map.getZoom();

        if(zoom < 3)
        {
            scale = 2;
        }
        else if(zoom < 5 )
        {
            scale = 3;
        }
        else if(zoom < 10)
        {
            scale = 4;
        }
        else if(zoom < 15)
        {
            scale = 5;
        }
        else if(zoom < 20)
        {
            scale = 6;
        }

        if(scale!=prevscale)
        {
            var len = markers.length;
            for(var j=0; j<len; j++)
            {
                var icon = markers[j].getIcon();
                if(icon.hasOwnProperty("scale"))
                {
                    icon.scale = scale;
                    markers[j].setIcon(icon);
                }   
            }
        }
        prevscale = scale;
    });
}

Upvotes: 1

Related Questions