3

There is any way to fill a svg image with a color and add it to the google maps as a marker? Any suggestions?

The svg file that i want to include as a marker is this one:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="108px" height="78px" viewBox="0 0 108 78" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
<title>Fill 1 + Fill 3 + Page 1</title>
<desc>Created with Sketch.</desc>
<defs>
    <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
        <feGaussianBlur stdDeviation="6.51596967" in="SourceGraphic" result="blur"></feGaussianBlur>
    </filter>
    <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
        <feGaussianBlur stdDeviation="2.31675092" in="SourceGraphic" result="blur"></feGaussianBlur>
    </filter>
</defs>
<g id="web-1800px" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
    <g id="Fill-1-+-Fill-3-+-Page-1" sketch:type="MSLayerGroup" transform="translate(15.000000, 0.000000)">
        <path d="M24.1143429,57.9295985 L35.100558,57.9295985 C39.3716034,57.9295985 45.4201937,56.528459 48.5926176,54.7623169 L75.8976824,39.1025231 C79.0694891,37.3363809 78.0881361,36 73.8170908,36 L27.5824071,36 C23.3113617,36 18.4422465,37.4600109 16.9177549,39.4086544 L5.09214364,54.52742 L0.0927985969,60.9202659 C0.0927985969,60.9202659 -0.142355781,61.1439772 0.136002813,61.2505345 C0.438432329,61.3618014 0.876646524,61.30293 0.993297908,61.2676072 C9.90015573,58.3475855 18.0410645,57.9295985 24.1143429,57.9295985" id="Fill-1" opacity="0.41639459" fill="#030404" filter="url(#filter-1)" sketch:type="MSShapeGroup"></path>
        <path d="M0,60.0040695 C0,57.2435893 14.9239708,55 33.328967,55 C51.7339632,55 66.657934,57.2435893 66.657934,60.0040695 C66.657934,62.7645496 51.7339632,65.0081389 33.328967,65.0081389 C14.9239708,65.0081389 0,62.7645496 0,60.0040695" id="Fill-3" opacity="0.291161381" fill="#030404" filter="url(#filter-2)" sketch:type="MSShapeGroup"></path>
        <g id="Page-1" fill="{{mapPinFillColor}}" sketch:type="MSShapeGroup">
            <path d="M33.2075254,53.8585859 C37.5467006,53.8585859 42.5908347,50.7210101 44.4082574,46.7880808 L59.7337213,11.9177778 C60.2682574,10.7654545 60.3751646,8.76141414 60.3751646,8.76141414 L60.3751646,4.12080808 C60.3374326,1.65333333 58.3621646,0 55.1304223,0 L8.13526766,0 C3.78980374,0 0.00403054625,3.25030303 0.00403054625,7.5840404 L0.00403054625,46.2551313 L0.00403054625,60.4969697 C0.00403054625,60.4969697 -0.0588560517,60.9979798 0.312174876,61.229697 C0.702071783,61.4739394 1.11083467,61.38 1.19887591,61.2923232 C7.93403055,54.7917172 15.8703192,53.8585859 22.0451543,53.8585859 L33.2075254,53.8585859 Z" id="Fill-1"></path>
            <path d="M60.371134,4.12080808 C60.3327732,1.65333333 58.358134,0 55.1263918,0 L8.13123711,0 C3.7857732,0 0,3.25030303 0,7.5840404 L0,12.5941414 C0,8.26040404 3.7857732,5.01010101 8.13123711,5.01010101 L55.1446289,5.01010101 C58.2141237,5.01010101 60.1453711,6.50060606 60.371134,8.76141414 L60.371134,4.12080808 Z" id="Fill-3" fill-opacity="0.4"></path>
        </g>
    </g>
</g>
</svg>

I want to fill with a color just in a specific section

I searched for a while and i found no answer for my question. I found that svg notation path would be a nice solution. However, in all examples, i didn't find any that use complex svg's with nested paths.

Thanks in advance

Ricardo Ribas
  • 409
  • 4
  • 14
  • possible duplicate of [How to use SVG markers in Google Maps API v3](http://stackoverflow.com/questions/24413766/how-to-use-svg-markers-in-google-maps-api-v3) – geocodezip Feb 02 '16 at 15:33
  • The svg that i want to change has some layers. I just want to fill with a color in a specific section. The other layers are shadows. Is it possible to achieve? I already saw the link that you sent me. In that case, the example only use on level. – Ricardo Ribas Feb 02 '16 at 16:21
  • You can look in this [example](http://jsfiddle.net/upsidown/r1mm0hft/) that has a multiple path SVG. You can use an SVG file (with multiple elements, rather than just the single path definition) just ensure that you have all the required properties. Here is the [documentation](https://www.w3.org/TR/SVG/paths.html#PathDataGeneralInformation). – abielita Feb 03 '16 at 03:01

0 Answers0