GoogleMaps SVG marker fillColor

Question

I am currently trying to change the color of an existent marker.

Here is my javascript code:

$(".etablissement").mouseenter(function() {
        var currentMarker = oMarkers[$(this).data("type")+"-"+$(this).data("id")];
        var currentIcon = currentMarker.getIcon();
        currentIcon = currentIcon.url;
        var newIcon = {
            url: currentIcon,
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(30, 30),
            scaledSize:new google.maps.Size(40, 40),
            fillColor: '#1077aa',
            fillOpacity: 1,
            strokeColor: '#1077aa'
        };
        currentMarker.setIcon(newIcon);
        if(typeof oMarkers_panier[$(this).data("type")+"-"+$(this).data("id")] == 'undefined' || oMarkers_panier[$(this).data("id")] == null){
            currentMarker.setIcon(newIcon);
        }
        oInfo[$(this).data("type")+"-"+$(this).data("id")].open(oMap, currentMarker);
        currentMarker.setAnimation(google.maps.Animation.BOUNCE);

    });

I get the current icon of the marker with getIcon() then I create a new marker with the same image but a new color. The problem is that the marker's color doesn't change. I tried to change the whole icon with a basic .png and it works so I don't know what could be the problem.

Here is my svg code:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="15.5" y1="15.5" x2="15.5" y2="26.0013">
    <stop  offset="0" style="stop-color:#808080"/>
    <stop  offset="1" style="stop-color:#636362"/>
</linearGradient>
<path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_1_)" stroke="#FFFFFF" stroke-miterlimit="10" d="M15.5,27.5
    c0,0-9-10.029-9-15s4.029-9,9-9s9,4.029,9,9S15.5,27.5,15.5,27.5z"/>
<path fill="#FFFFFF" d="M11.154,11.065c0-0.58,0.47-1.052,1.051-1.052s1.052,0.472,1.052,1.052c0,0.581-0.471,1.051-1.052,1.051
    S11.154,11.646,11.154,11.065z"/>
<path fill="#FFFFFF" d="M19.893,12.116h-6.157v-1.353c0-0.413,0.312-0.75,0.696-0.75h4.764c0.385,0,0.697,0.337,0.697,0.75V12.116z"
    />
<path fill="#FFFFFF" d="M21.607,10.068v4.355c0,0.249-0.201,0.451-0.451,0.451c-0.124,0-0.236-0.052-0.318-0.133
    c-0.08-0.082-0.132-0.193-0.132-0.318v-0.751h-10.12v0.789c0,0.228-0.186,0.413-0.414,0.413c-0.113,0-0.217-0.047-0.293-0.121
    c-0.074-0.076-0.12-0.179-0.12-0.292V8.19c0-0.229,0.185-0.413,0.413-0.413c0.115,0,0.217,0.047,0.292,0.121
    s0.122,0.178,0.122,0.292v4.73h10.12v-2.853c0-0.249,0.201-0.451,0.45-0.451c0.125,0,0.237,0.05,0.318,0.132
    C21.557,9.831,21.607,9.943,21.607,10.068z"/>
<path display="none" fill="#FFFFFF" d="M19.424,11.294c-0.247-0.066-0.496-0.089-0.737-0.073c-0.07-0.428-0.151-0.928-0.246-1.515
    l0.261-0.373l0.519,0.129l0.116-0.432L17.392,8.51c-0.232,0.187,0.007,0.249,0.816,0.671l-0.264,0.383l-3.84-1.029
    c0.501-0.834,0.337-0.809,1.5-0.493L15.724,7.6c-1.607-0.415-1.281-0.521-2.879,2.011C12.72,9.55,12.588,9.501,12.45,9.464
    c-1.218-0.326-2.474,0.398-2.8,1.616s0.399,2.474,1.616,2.8c1.218,0.326,2.475-0.399,2.801-1.616c0.244-0.911-0.101-1.844-0.8-2.393
    c0.088-0.138,0.184-0.285,0.286-0.443c2.317,4.274,1.253,3.396,2.974,3.931c0.008,0.003,0.017,0.005,0.024,0.007
    c-0.063,1.062,0.625,2.06,1.69,2.345c1.218,0.326,2.475-0.398,2.801-1.616S20.642,11.62,19.424,11.294z M13.55,12.125
    c-0.25,0.934-1.212,1.489-2.146,1.239c-0.933-0.25-1.488-1.213-1.238-2.146s1.212-1.488,2.145-1.238
    c0.084,0.022,0.165,0.051,0.243,0.085c-0.994,1.555-0.878,1.379-0.919,1.521c-0.036,0.12,0.037,0.242,0.157,0.284
    c0.227,0.036,0.167,0.06,1.186-1.545C13.486,10.749,13.732,11.445,13.55,12.125z M15.759,12.604l-1.892-3.628l3.76,1L15.759,12.604z
     M16.626,12.903l-0.411-0.112l1.816-2.513l0.168,1.027C17.459,11.521,16.843,12.104,16.626,12.903z M18.288,11.839l0.259,1.583
    l-1.403-0.38C17.302,12.454,17.747,12.017,18.288,11.839z M18.379,15.193c-0.78-0.209-1.297-0.916-1.298-1.688
    c1.76,0.474,1.893,0.606,1.999,0.308c0.021-0.09,0.005-0.16-0.307-2.062c0.169-0.006,0.341,0.013,0.512,0.059
    c0.933,0.25,1.488,1.213,1.238,2.146S19.312,15.443,18.379,15.193z"/>
</svg>

I have no error and everything is working except that the marker's color doesn't change.

Can you help me please?

Thanks

Answer 1

Here's the use (going through the markers and updating the original values). i and fillColor are the variables set above the fold.

markers[i].setIcon(
    { 
       path: google.maps.SymbolPath.CIRCLE, scale: 20, fillOpacity: 1, strokeWeight: 1, fillColor: '' + fillColor + '' 
    }
);

Not sure how that would work with your SVG images, just using this to showcase usage of setIcon(google.maps.Symbol).

Answer 2

I was able to dynamically control the marker's color by using an SVG path. Example:

new google.maps.Marker({
                    position: new google.maps.LatLng(data.latitude, data.longitude),
                    map: googleMap,
                    visible: isVisible,
                    icon: {
                        path: "M7.8,1.3L7.8,1.3C6-0.4,3.1-0.4,1.3,1.3c-1.8,1.7-1.8,4.6-0.1,6.3c0,0,0,0,0.1,0.1" +
                                "l3.2,3.2l3.2-3.2C9.6,6,9.6,3.2,7.8,1.3C7.9,1.4,7.9,1.4,7.8,1.3z M4.6,5.8c-0.7,0-1.3-0.6-1.3-1.4c0-0.7,0.6-1.3,1.4-1.3" +
                                "c0.7,0,1.3,0.6,1.3,1.3C5.9,5.3,5.3,5.9,4.6,5.8z",
                        strokeColor: markerColor,
                        fillColor: markerColor,
                        fillOpacity: 1.0,
                        scale: 3
                    },
                    data: data
                });

In my case, I didn't need the stroke and fill to be different colors but as you can see, it is an option. Also to note, if coloring the fill you will need the fillOpacity set to 1.0 in order for this to show. This is because fillOpacity has a default value of 0.