Multi-colored Google Map SVG Symbols

Question

A Google Map marker can take a complex svg path as its icon as in something like:

var baseSvg = {
    x1 : \"m 0,0 l45,0 l 190,225 l -45,0 l -190,-225 z\",
          


        

Answer 1

When it comes to opacity, strokeOpacity is your guy. Check the maps.Symbol class for more information on symbol properties.

Answer 2

I just did the same thing and I think you have to draw two markers with essentially identical data, but with the path and in this case fillColor properties changed:

var baseSvg = {
        x1 : "m 0,0 l45,0 l 190,225 l -45,0 l -190,-225 z",
        x2 : "m 225,0 l -45,0 l -190,225 l 45,0 l 190,-225 z"                
    },
    baseIcon = {
        fillOpacity: 1,
        scale: .2,
        strokeColor: "black",
        strokeWeight: 0,
        rotation: 15
    },
    markerPos = new google.maps.LatLng(somelat, somelng),
    // psuedo code for cloning an object since that 
    // is out of scope for this question
    greenIcon = Object.clone(baseIcon),
    redIcon = Object.clone(baseIcon);

greenIcon.path = baseSvg.x1;
greenIcon.fillColor = "#0f0";
redIcon.path = baseSvg.x2;
redIcon.fillColor = "#f00";

var marker1 = new google.maps.Marker({
    position: markerPos,
    map: map,
    icon: greenIcon
});
var marker2 = new google.maps.Marker({
    position: markerPos, 
    map: map,
    icon: redIcon
});

obviously not optimized js, but you get the idea.