I want to show text within an SVG which is wholly defined in js. The SVG picture shows as expected, but the text does not. I have tried the actual SVG definition in an online SVG viewer and it has the same result: picture is good, but no text showing.
I create the following string in js and then use it as the content in an AdvancedMarkerElementmarker in Google Maps.
SVGstring = '<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-3 -49 52 52" > <style>svg { margin-top: 3px margin-bottom: 3px margin-right: 3px margin-left: 3px}</style> <path stroke="black" stroke-width="3" d="m 0,0 l 0,-25 l 23,0 l 7,-20 l 7,20 l 3,0 l 0,25 z" fill="#9494ff" /><text x="20" y="35" font = "20px sans-serif" fill="black" >999</text></svg>'
The google maps marker then has its content set by:
pinSvg = document.createElement('pinSvg');
pinSvg.innerHTML = SVGstring;
marker.content = pinSvg;