Set custom map color in google map marker

Question

I want to display multiple markers with different color like this

see my demo link

In my code, I set custom color at outer side but problem at inner circle (fork and spoon)

I want circle behind fork and spoon as it is (white)

JS

var myLatlng = {
  lat: 53.5617303,
  lng: 9.9835443
};

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 14,
  center: myLatlng,
  disableDefaultUI: true,
  scrollwheel: false,

});

var $markerImage = document.querySelector('.markerImage'),
  markerImageSvg = $markerImage.innerHTML || '';

myLatlng.lng -= 0.006;

['#DF6047', '#ffd454', '#88D063'].forEach(function(color) {
  myLatlng.lng += 0.0099;

  new google.maps.Marker({
    position: myLatlng,
    map: map,
    clickable: false,
    icon: {
      anchor: new google.maps.Point(16, 16),
      url: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(markerImageSvg.replace('{{background}}', color))
    }

Please give me any suggestions.

Answer 1

1. Remove the <style> .st1: from the SVG code.
2. Add the fill={{background}} to each of the paths in the SVG code.
3. Make the javascript replace() command replace all of the instances: markerImageSvg.replace(/{{background}}/g, color)

See updated fiddle here: https://jsfiddle.net/fzsg9pky/5/