JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map" style="width: 500px; height: 400px;"></div>

JavaScript

var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 10,
       center: new google.maps.LatLng(-33.92, 151.25),
       mapTypeId: google.maps.MapTypeId.ROADMAP
   });

var template = [
    '<?xml version="1.0"?>',
    '<svg width="26px" height="26px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">',
    '<circle stroke="#222" fill="{{ color }}" cx="50" cy="50" r="35"/>',
    '</svg>'
].join('\n');
var svg = template.replace('{{ color }}', '#800');

var docMarker = new google.maps.Marker({
    position: new google.maps.LatLng(-33.92, 151.25),
    map: map,
    title: 'Dynamic SVG Marker',
    icon: { url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg), scaledSize: new google.maps.Size(20, 20) },
	optimized: false
});

var docMarker = new google.maps.Marker({
    position: new google.maps.LatLng(-33.95, 151.25),
    map: map,
    title: 'Dynamic SVG Marker',
    icon: { url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg), scaledSize: new google.maps.Size(20, 20) },
	optimized: false
});