How do I set a marker's size by a number of purchases?

Question

In an e-commerce system I'm building, I want to use google maps api to show the origins of the purchases. I want the markers to be shaped as a circle, and I want that circle's size to be determined by the number of purchases made from that particular city. Let's say there were 100 orders from NYC and 200 from Boston, The Boston's circle will be twice the size.

How can I do that?

Answer 1

Your marker icon can be a symbol (SVG path) so you can scale it to your convenience.

The following example upscales the symbol each time you add one to the map. You can easily reuse that to your use case.

var map;
var polyLine;
var polyOptions;
var iconSize = 0.5;

function initialize() {

    var mapOptions = {
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(0,0)
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    google.maps.event.addListener(map, 'click', function(event) {

        addPoint(event);
    });
}

function addPoint(event) {

    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: iconSize
    }

    var marker = new google.maps.Marker({
        position: event.latLng,
        map: map,
        draggable: false,
        icon: icon,
        zIndex : -20
    });

    map.panTo(event.latLng);

    iconSize += .1;
}

initialize();

JSFiddle demo