Google Maps V3: Preventing Marker Scaling

Question

I have a google map and a marker on it.

I need the marker to be a fixed size, such as 10x10 pixels, and return the same, even if I zoom in or out.

This is what I have right now (and not working):

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 it possible to block the scaling marker of its size when the map scale changes?

Answer 1

Google has no ready-made way to stop markers from scaling.

You can use Ground Overlay to set a fixed area on the map, and then attach the image. Ground overlay trick - you need to know the coordinates of the bounds object, and you probably have to come up with some way to calculate the boundaries. In this example, I simply expand the center point into a rectangle.

You will also lose other marker features, since this method does not use a marker object (such as drag and drop, animation, etc.), but overlays have click events.

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

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