Google maps Custom marker - svg - google-maps

Question

I'm trying to add custom marker - SVG of donut shape. Following is the link of fiddle :
https://jsfiddle.net/jfx2uqws/7/
Code:
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);
Problem is - I'm trying to add icon in the middle of the donut. But its not getting displayed.
So, looking for the solution or if any other easy way to achieve the above thing - svg multi color donut with icon in between.