Map Markers Increase in Size According to Order

Question

Can anyone advise as to how I should implement a system where the map markers' sizes increase according to their order?

The markers are arranged in order and I would like the latest marker to be the biggest and the others to decrease in size the lower in order they are.

Answer 1

A solution could be to use SVG markers. You can scale them as you wish. Here is a quick example with a simple circle marker:

var icon = {

    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
    fillColor: '#FF0000',
    fillOpacity: .6,
    anchor: new google.maps.Point(0,0),
    strokeWeight: 0,
    scale: 1
}

Note the scale property. You can increment this value every time you create a marker.

JSFiddle demo

Hope this helps!

Answer 2

increment the size of icon marker that may help