在谷歌地图标记中设置自定义地图颜色

我想像这样显示多个不同颜色的标记

看我的演示链接

在我的代码中，我在外侧设置了自定义颜色，但在内圈（叉子和勺子）上设置了问题

我想要叉子和勺子后面的圆圈（白色）

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))
    }

请给我任何建议。