Geek Answers Handbook

GoogleMaps SVG marker fillColor

I'm currently trying to change the color of an existing 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 marker icon using getIcon (), then create a new marker with the same image but a new color. The problem is that the color of the marker does not change. I tried changing the whole icon using the main .png and it works, so I don’t know what the problem is.

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 works, except that the color of the marker does not change.

Can you help me?

thank

+4
source share
4 answers

( ). fillColor - , .

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

, SVG, , setIcon (google.maps.Symbol).

+2

, SVG. :

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
                });

, - , , , . , fillOpacity, 1.0, . , fillOpacity 0.

0
source

When you add an svg file as a marker, google physically places this svg under the tag, which means that you cannot control the objects inside. The only way is to put the path directly under the icon, then you can control this object. Starting with png, if it has some transparency, then it seams fillColor just puts some background. In any case, try working with the browser developer tool.

0
source

More articles:


All Articles