GoogleMaps SVG marker fillColor

B

4

6

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

Bream answered 10/2, 2015 at 11:29 Comment(0)

G

-1

I don't believe that the Icon object has a fillColor property. I think you just have to provide a separate marker SVG for each colour variant you want to use.

https://developers.google.com/maps/documentation/javascript/reference#Icon

Glib answered 10/2, 2015 at 15:41 Comment(3)

I found that : #24414266 Google documentation: developers.google.com/maps/documentation/javascript/symbols So there is a fillColor property on Symbols but apparently not on Icons. But I don't even know the difference between a symbol and an icon – Bream 11/2, 2015 at 9:16

A symbol is like a mini SVG with just a single path element. The path property is just the d attribute of an SVG <path>. And you specify the fill colour, stroke colour, etc with the other symbol properties. An Icon references a whole image, and can be an SVG or a PNG etc. – Glib 11/2, 2015 at 11:49

Ok so I will have to use a different icon for each color. Thanks ! – Bream 11/2, 2015 at 13:19

J

4

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.

Jermyn answered 26/7, 2017 at 19:56 Comment(0)

A

3

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).

Adversity answered 8/2, 2016 at 18:14 Comment(1)

"Thank you", @slfan, for making my code prettier. No, it wasn't needed, some of us prefer one-liners. – Adversity 8/2, 2016 at 19:46

S

0

When you adding svg file as a marker, google physically puts that svg under tag, it means you cannot control objects inside. The only way is to put path directly under icon, then it is possible to control that object. As of png, if it has some transparency, then it seams fillColor just puts some background. Anyway try to work with browser's developers tool.

Shennashensi answered 26/7, 2017 at 20:16 Comment(0)

G

-1