Using javascript-generated SVG with embedded external SVG as Google Maps icons,

Question

So I'm developing a website which uses Google Maps JavaScript API. I have a few markers that I would like to generate an SVG icon for, but this SVG must use JavaScript variables (to display a number on the icon), as well as show an external SVG (such as a FontAwesome icon).

I managed to generate the icons with JavaScript variables as follows:

let newIcon = [
    '<svg width="' + size + 'px" height="' + size + 'px" viewBox="0 0 100 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >',

    '<ellipse id="circuloExterior" fill="' + mainColor + '" cx="50" cy="50" rx="42.8" ry="42.8"/>',
    '<polygon id="triangulo" fill="' + mainColor + '" stroke="' + mainColor + '" stroke-width="1.6" points="28,83 72,83 50,108"/>',
    '<ellipse id="circuloIntermedio" fill="' + mainColor + '" cx="50" cy="50" rx="41.2" ry="41.2"/>',
    '<ellipse id="circuloInterior" stroke="' + mainColor + '" fill="' + secColor + '" stroke-width="1.6" cx="50" cy="50" rx="32" ry="32"/>',

    '</svg>',
].join('\n');

newIcon = {
    url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(newIcon),
}

And then I use newIcon as the marker's icon. This is working with no issues.

But, when I try linking to an external SVG that I'd like to add to the icon (along with the existing one), it doesn't work:

<image xlink:href="<link to external SVG on the same server>" />

I've tried making an SVG file with the exact same external SVG link and it works standalone, so it's not an issue with the image tag.

I've also tried explicitly specifying an SVG as a path instead of linking to it, and that works but it's not exactly what I'm looking for:

<g transform="translate(30,25) scale(0.13)"><path fill="#000000" d="M128 288c0-6.25-2-12.25-5-17.25-3.25-5-16.5-22-21.75-38.75-0.75-2.75-3.25-4-5.25-4s-4.5 1.25-5.25 4c-5.25 16.75-18.5 33.75-21.75 38.75-3 5-5 11-5 17.25 0 17.75 14.25 32 32 32s32-14.25 32-32zM256 256c0 70.75-57.25 128-128 128s-128-57.25-128-128c0-25.25 7.75-48.75 20.25-68.75 12.75-20 66.25-87.75 86.5-155.25 3.25-10.75 13.25-16 21.25-16s18.25 5.25 21.25 16c20.25 67.5 73.75 135.25 86.5 155.25s20.25 43.5 20.25 68.75z"/></g>

Any tips? Thank you.

I've tried using as icon an SVG with a simple square and an ```image``` referencing another SVG. It works fine when opening it directly in a browser, but when using as an icon only the square shows up. It must be some limitation of Google Maps? Any workaround? — fseixas, Feb 05 '20 at 22:25

Joe - GMapsBook.com · Answer 1 · 2020-04-04T13:51:54.093

From Mozilla:

SVG files displayed with <image> are treated as an image: external resources aren't loaded, :visited styles aren't applied, and they cannot be interactive. To include dynamic SVG elements, try <use> with an external URL.

I suppose you could take <use> or <object> like so:

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" version="1.1">
    <object height="200" width="200" data="https://www.wikipedia.org/portal/wikipedia.org/assets/img/sprite-9ba8de1b.svg"/>
</svg>

Using javascript-generated SVG with embedded external SVG as Google Maps icons,

1 Answers1