Dynamic Google Map Marker Icon

createmarker.js

// The Template
var marker_template = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="35px" viewBox="0 0 30 49" style="enable-background:new 0 0 30 49;" xml:space="preserve"><path class="marker-background" fill="[[ bg ]]" d="M15,48.5c-1.1-5.5-3.1-10-5.4-14.2c-1.8-3.1-3.8-6-5.7-9c-0.6-1-1.2-2.1-1.8-3.1 c-1.2-2.1-2.2-4.5-2.1-7.7C0.1,11.4,1,9,2.2,6.9c2.1-3.3,5.7-6,10.4-6.8c3.9-0.6,7.5,0.4,10.1,1.9c2.1,1.2,3.7,2.9,5,4.8 c1.3,2,2.2,4.4,2.3,7.5c0,1.6-0.2,3.1-0.6,4.3c-0.4,1.2-1,2.3-1.5,3.4c-1,2.2-2.4,4.2-3.7,6.1C20.3,34.2,16.6,40.3,15,48.5z"/><circle class="marker-circle" fill="[[ circle ]]" cx="15" cy="15" r="5"/><text class="marker-text" x="15" y="22" text-anchor="middle" fill="[[ textColor ]]" font-family="MyriadPro-Regular" font-size="18">[[ text ]]</text></svg>';

// Creating a marker
var icon = marker_template
  .replace('[[ bg ]]', '') // some hex color
  .replace('[[ circle ]]', '') // some hex color
  .replace('[[ text ]]', '') // some text
  .replace('[[ textColor ]]', ''); // some hex color

  icon = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(icon);

google maps marker example.js

// Run the following in the browser console to see some randomly generated markers:

var marker_template = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="35px" viewBox="0 0 30 49" style="enable-background:new 0 0 30 49;" xml:space="preserve"><path class="marker-background" fill="[[ bg ]]" d="M15,48.5c-1.1-5.5-3.1-10-5.4-14.2c-1.8-3.1-3.8-6-5.7-9c-0.6-1-1.2-2.1-1.8-3.1 c-1.2-2.1-2.2-4.5-2.1-7.7C0.1,11.4,1,9,2.2,6.9c2.1-3.3,5.7-6,10.4-6.8c3.9-0.6,7.5,0.4,10.1,1.9c2.1,1.2,3.7,2.9,5,4.8 c1.3,2,2.2,4.4,2.3,7.5c0,1.6-0.2,3.1-0.6,4.3c-0.4,1.2-1,2.3-1.5,3.4c-1,2.2-2.4,4.2-3.7,6.1C20.3,34.2,16.6,40.3,15,48.5z"/><circle class="marker-circle" fill="[[ circle ]]" cx="15" cy="15" r="5"/><text class="marker-text" x="15" y="22" text-anchor="middle" fill="[[ textColor ]]" font-family="MyriadPro-Regular" font-size="18">[[ text ]]</text></svg>';

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
var circle_icon = function() {return marker_template
  .replace('[[ bg ]]', getRandomColor())
  .replace('[[ circle ]]', getRandomColor())
  .replace('[[ text ]]', '')
  .replace('[[ textColor ]]', 'transparent');}

var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var text_icon = function(i) {return marker_template
  .replace('[[ bg ]]', getRandomColor())
  .replace('[[ circle ]]', 'transparent')
  .replace('[[ text ]]', letters[i % letters.length])
  .replace('[[ textColor ]]', getRandomColor());}

var i=0;

do{document.write(circle_icon())}while(++i<100);
do{document.write(text_icon(i))}while(++i<200);

mapsExample.js

// The Template
var marker_template = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="35px" viewBox="0 0 30 49" style="enable-background:new 0 0 30 49;" xml:space="preserve"><path class="marker-background" fill="[[ bg ]]" d="M15,48.5c-1.1-5.5-3.1-10-5.4-14.2c-1.8-3.1-3.8-6-5.7-9c-0.6-1-1.2-2.1-1.8-3.1 c-1.2-2.1-2.2-4.5-2.1-7.7C0.1,11.4,1,9,2.2,6.9c2.1-3.3,5.7-6,10.4-6.8c3.9-0.6,7.5,0.4,10.1,1.9c2.1,1.2,3.7,2.9,5,4.8 c1.3,2,2.2,4.4,2.3,7.5c0,1.6-0.2,3.1-0.6,4.3c-0.4,1.2-1,2.3-1.5,3.4c-1,2.2-2.4,4.2-3.7,6.1C20.3,34.2,16.6,40.3,15,48.5z"/><circle class="marker-circle" fill="[[ circle ]]" cx="15" cy="15" r="5"/><text class="marker-text" x="15" y="22" text-anchor="middle" fill="[[ textColor ]]" font-family="MyriadPro-Regular" font-size="18">[[ text ]]</text></svg>';

// Creating a marker
var icon = marker_template
  .replace('[[ bg ]]', '#e0f3ac')
  .replace('[[ circle ]]', '#ffffff')
  .replace('[[ text ]]', '')
  .replace('[[ textColor ]]', 'transparent');

var map = new google.maps.Map(document.getElementById('some_id'));

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(100,-200),
  icon: {
    url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(icon)
  }
}, map);