Google maps 谷歌地图自定义标记-svg

我正在尝试添加自定义标记-圆环形状的SVG。以下是小提琴的链接：

代码：

问题是-我试图在面包圈中间添加图标。但它并没有被展示出来

---

因此，寻找解决方案或者其他任何简单的方法来实现上述目标——svg多色圆环，中间带有图标

foreignobject区分大小写，必须在CreateElementsAdded中作为foreignobject写入此更改，但它仍然不适用于我。添加的图标仍无法显示：图标非常小，位于左上角。您的浏览器web调试工具可以向您显示它的位置。是的，我可以看到它，但只有在我获取SVG代码并在任意html页面的其他地方运行它时，我才能看到它。但是在谷歌地图上它没有显示图标。。感谢罗伯特对这个问题的回答。

let map;

let latlng_statue = new google.maps.LatLng(-33.92, 151.25);

function initialize() {
    var mapOptions = {
        zoom: 17,
        center: latlng_statue
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  let data = [{
    fill:25,
    color:"#80e080"
},{
    fill:25,
    color:"#4fc3f7"
},{
    fill:25,
    color:"#9575cd"
},{
    fill:25,
    color:"#f06292"
}]
let doughnut = document.querySelector("#map-canvas"),
svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
filled = 0;
svg.setAttribute("width","80px");
svg.setAttribute("height","80px");
svg.setAttribute("viewBox","0 0 100 100");
doughnut.appendChild(svg);
data.forEach(function(o,i){
  var circle = document.createElementNS("http://www.w3.org/2000/svg","circle"),
  startAngle = -90,
  radius = 30,
  cx = 50,
  cy = 50,
  strokeWidth = 15,
  dashArray = 2*Math.PI*radius,
  dashOffset = dashArray - (dashArray * o.fill / 100),
  angle = (filled * 360 / 100) + startAngle;
  circle.setAttribute("r",radius);
  circle.setAttribute("cx",cx);
  circle.setAttribute("cy",cy);
  circle.setAttribute("fill","transparent");
  circle.setAttribute("stroke",o.color);
  circle.setAttribute("stroke-width",strokeWidth);
  circle.setAttribute("stroke-dasharray",dashArray);
  circle.setAttribute("stroke-dashoffset",dashOffset);
  circle.setAttribute("transform","rotate("+(angle)+" "+cx+" "+cy+")");

  svg.appendChild(circle);

  filled+= o.fill;

})

var foreignobject = document.createElementNS("http://www.w3.org/2000/svg","foreignobject"),
  clsName="node",
  x="40",
  y="42",
  width="20",
  height="20";
  foreignobject.setAttribute("class",clsName);
  foreignobject.setAttribute("x",x);
  foreignobject.setAttribute("y",y);
  foreignobject.setAttribute("width",20);
  foreignobject.setAttribute("height",20);

  let spanEl = document.createElement("span");
  spanEl.setAttribute("style", "font-size: 10px;");
  let fontColor = document.createElement("font");
  fontColor.setAttribute("style", "color: red;");

  let iconEl = document.createElement("i");
  iconEl.setAttribute("class","fa fa-cloud");
  fontColor.appendChild(iconEl);
  spanEl.appendChild(fontColor);

  foreignobject.appendChild(spanEl);
  svg.appendChild(foreignobject); 

let s = new XMLSerializer();
let str = s.serializeToString(svg);

let marker = new google.maps.Marker({
        position: latlng_statue,
        map: map,
        title: 'donut',
        icon: { url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(str), scaledSize: new google.maps.Size(50, 50) },
    optimized: false
    });
    } 

google.maps.event.addDomListener(window, 'load', initialize);