2

I am using a custom icon for a Google Maps marker. I want to apply styling to the marker; in particular linear gradient. The xyz code below works when I run it normal as a simple HTML document, but when I try to run it in Javascript, it doesn't work. 

var xyz = 'data:image/svg+xml;utf-8, \
    <svg width="30" height="60" xmlns="http://www.w3.org/2000/svg"> \
        <defs><linearGradient id="mygx"> \
            <stop offset="5%" stop-color="yellow"/> \
            <stop offset="95%" stop-color="red"/> \
        </linearGradient></defs> \
        <path fill="url(#mygx)" stroke="black" stroke-width="1.5" d="M0 0 L0 35 L15 60 L30 35 L30 0 L0 0Z"></path> \
        </svg>';

var myIcon = {
    url: xyz,
    fillOpacity: 0.7,
    scale: 1
};

var marker = new google.maps.Marker({
    position: markerLocation,
    icon: myIcon,
    map: map,
    title: 'hello'
});

Any solution welcome.

user3320795
  • 523
  • 2
  • 6
  • 17
  • Judging by this website, the solution is encodeURIComponent() but I haven't figured it out yet: http://www.ubilabs.net/de/news/2016-01-11 – user3320795 Feb 07 '16 at 00:17

1 Answers1

1

Got it. Google Maps didn't like the # in the url. This works:

<path fill="url(\u0023mygx)"...

The \u0023 is unicode (I think) for #.

user3320795
  • 523
  • 2
  • 6
  • 17