Google maps V3: prevent marker scaling

Question

I have a google map, and an marker on it.

I need the marker to be a fixed size of, for example, 10x10 pixels, and remail the same even if i zoom in or zoom out.

This is what i have right now (and is not workig):

var marker = new google.maps.Marker({
    position: circleCenter,
    map: googleMap,
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        fillOpacity: 0.5,
        fillColor: 'ff0000',
        strokeWeight: 10,
        size: 5
    }
});

Is this possible to block the marker of scaling it's size when the map zoom is changed?

Does this answer help? http://stackoverflow.com/a/13385598/875127 — Cianan Sims, Mar 27 '13 at 18:59
Thank you for link. Pff...i was hoping for an out-of-box solution, like a simple property. I will make the browser very slow if i add this callback and if i have about 30 markers on the map :( — Catalin, Mar 27 '13 at 19:10
Yeah, I don't know of a simpler method. Would be nice though! I don't think 30 markers will be too terrible... — Cianan Sims, Mar 27 '13 at 19:11
I am playing with 6 circles on the map and it already started to have delayed response (firefox). Anyway, as a hack, i have created a `google.maps.Circle` with the radius of 5 meters and it is keeping the ratio. But this doesn't fixes the problem — Catalin, Mar 27 '13 at 19:15

score 1 · Accepted Answer · answered Mar 27 '13 at 20:42

Google does not have a out-of-box way to stop markers from scaling.

You could use a Ground Overlay to set a fixed area on the map and then attach an image. The trick with ground overlays is you have to know the coordinates of the bounds object and you probably will have to come up with some way of calculating the bounds. In this example I just expand a center point into a rectangle.

You would also loose other marker capabilities since this method doesn't use a marker object (e.g. dragging, animations, etc.), but the overlays do have click events.

Here is a proof of concept: http://jsfiddle.net/bryan_weaver/4rxqQ/

relevant code:

function initialize() {
    var map;
    var centerPosition = new google.maps.LatLng(38.713107, -90.42984);
    var options = {
        zoom: 9,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map')[0], options);

    var icon = 'https://www.google.com/mapfiles/marker_black.png';
    var iconBounds = constructBounds(38.713107, -90.42984);
    var staticOverlay = new google.maps.GroundOverlay(icon, iconBounds);
    staticOverlay.setMap(map);
}

function constructBounds(lat, lng){
    var sw = new google.maps.LatLng(lat - .03, lng - .025)
    var ne = new google.maps.LatLng(lat + .03, lng + .025) 
    return new google.maps.LatLngBounds(sw, ne);
}

"Google does not have a out-of-box way to stop markers from scaling." it's interesting because I'm struggling right now to turn on scaling of markers. My makers don't change size when zooming in/out. — rzymek, Dec 09 '14 at 16:43

Google maps V3: prevent marker scaling

1 Answers1

Linked