マーカのサイズを購入数で設定するにはどうすればよいですか？

Question

私が構築している電子商取引システムでは、Googleマップのapiを使用して購入の起点を示したいと考えています。マーカーを円形にしたいと思っています。そのサークルのサイズは、その特定の都市からの購入数によって決まります。 NYCから100件、ボストンから200件の注文があったとしましょう。ボストンのサークルは2倍のサイズになります。

どうすればいいですか？

Answer 1

マーカーアイコンはシンボル（SVGパス）にすることができます。

次の例では、シンボルをマップに追加するたびにシンボルをアップスケールします。ユースケースに簡単に再利用できます。

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