Resize Google Maps marker on Zoom

Question

I need to display about 30 markers in a slightly small area.

Is there a way to resize the markers of the Google Maps Maps API when the user zooms in?

Or should I just use a smaller image?

Thanks in advance!

Answer 1

If you want to do something while scaling, you can create your own Mapview, which extends the original MapView and simply overrides dispatchDraw (canvas canvas).

With the addition of a small listener, you can do whatever you want in the callback. Something like that;

@Override protected void dispatchDraw(final Canvas canvas) { super.dispatchDraw(canvas); if (getZoomLevel() != lastZoomLevel) { if (listener != null) { listener.onZoom(lastZoomLevel, getZoomLevel()); } lastZoomLevel = getZoomLevel(); } } 

Answer 2

There is no outOfTheBox option to change the icons for markers. you will have to listen for scaling changes:

How to listen to user generated zoom in Google Maps?

and remove old markers and set new ones at your location with smaller icon images.

Answer 3

I use extends and fitBounds functions and get positions (LatLng) to set the scale for displaying elements

 //JSP <c:forEach var="lastPosition" items="${lastPositionResultDto}" > <input type="hidden" id="mapPointsPosition_${lastPosition.id}" value="${lastPosition.latitude}_${lastPosition.longitude}" > </c:forEach> //JAVASCRIPT map = new google.maps.Map(document.getElementById('map-canvas-position'), mapOptions); var arrPointMaps = $("[id^=mapPointsPosition_]"); var limits = new google.maps.LatLngBounds(0,0); for(var j=0; j<arrPointMaps.length; j++){ var stringPointMap = arrPointMaps[j].getAttribute("value").split("_"); var latAlertPoint = stringPointMap[0]; var lonAlertPoint = stringPointMap[1]; var limitPosition = new google.maps.LatLng(parseFloat(latAlertPoint), parseFloat(lonAlertPoint)); limits.extend(limitPosition); } map.fitBounds(limits); }