Google maps API v3 - 標記和標記顏色

Question

我遇到了定義我自己的標記標記和標記顏色的問題，所以我找到了this answer。 根據它，我可以定義我的標記對象與谷歌圖表API的幫助如下：

new google.maps.Marker({ 
    position:latlng, 
    map:map, 
    icon:'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|00FF00|000000' 
}); 

但在recent post of "Geo Developers Blog"，我發現，他們已經推出了針對標記一個新的標籤屬性。現在，我可以很容易地定義一個標籤標記如下：

new google.maps.Marker({ 
    position:latlng, 
    map:map, 
    label: 'A' 
}); 

我需要知道我是否可以定義標記顏色（沒有標籤的文本顏色）以同樣的方式，使我的標記對象看起來是這樣的：

new google.maps.Marker({ 
    position:latlng, 
    map:map, 
    label: 'A', //my label 
    color: 00FF00 //my marker color 
}); 

Answer 1

一種選擇是使用SVG Symbols：

var marker = new google.maps.Marker({ 
    map: map, 
    position: latlng, 
    label: "0", 
    icon: pinSymbol('red') 
}); 
function pinSymbol(color) { 
    return { 
     path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z', 
     fillColor: color, 
     fillOpacity: 1, 
     strokeColor: '#000', 
     strokeWeight: 1, 
     scale: 1, 
     labelOrigin: new google.maps.Point(0,-29) 
    }; 
} 

代碼片段：

function initialize() { 
 
    var latlng = new google.maps.LatLng(47.605, -122.333); 
 
    var myOptions = { 
 
    zoom: 10, 
 
    center: latlng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
 
    myOptions); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: latlng, 
 
    label: "0", 
 
    icon: pinSymbol('red') 
 
    }); 
 
    bounds.extend(marker.getPosition()); 
 

 
    var marker1 = new google.maps.Marker({ 
 
    map: map, 
 
    position: new google.maps.LatLng(47.5, -122.0), 
 
    label: "A", 
 
    icon: pinSymbol('#00FF00') 
 
    }); 
 
    bounds.extend(marker1.getPosition()); 
 
    var marker2 = new google.maps.Marker({ 
 
    map: map, 
 
    position: new google.maps.LatLng(47.6, -122.2), 
 
    label: "B", 
 
    icon: pinSymbol('orange') 
 
    }); 
 
    bounds.extend(marker2.getPosition()); 
 
    var marker3 = new google.maps.Marker({ 
 
    map: map, 
 
    position: new google.maps.LatLng(47.7, -122.1), 
 
    label: "C", 
 
    icon: pinSymbol('yellow') 
 
    }); 
 
    bounds.extend(marker3.getPosition()); 
 
    map.fitBounds(bounds); 
 
} 
 

 
function pinSymbol(color) { 
 
    return { 
 
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z', 
 
    fillColor: color, 
 
    fillOpacity: 1, 
 
    strokeColor: '#000', 
 
    strokeWeight: 1, 
 
    scale: 1, 
 
    labelOrigin: new google.maps.Point(0, -29) 
 
    }; 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>