Create a SVG Marker with Double Digit Numbering

JavaScript Code

• SVG is an image format for vector graphics. It literally means Scalable Vector Graphics
• In this sample we create our Icons in memory via a SVG code
• SVG should be supported by most  of the current browsers

var svgText = trackIDX.toString();
var svgOffset = 2;
    // Reset the xOffset in case we a double digit number
if ( trackIDX < 10 ) {
    svgOffset = 6;
}

var svgIcon ={
 anchor: new google.maps.Point(10,10),
 url: 'data:image/svg+xml;utf-8, \
 <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"> \
   <circle id="eins" cx="10" cy="10" r="10" /> \
   <text stroke-width="1" stroke="yellow" x="' + svgOffset.toString() + '" y="15" font-family="sans-serif" font-size="14px" fill="yellow">' + svgText +'</text> \
 </svg>',
 // scaledSize: new google.maps.Size(20, 20)
};

var startLatLng = sTrack.startLatLng;
if (startLatLng) {
 var svgMarker = new google.maps.Marker({
 position: startLatLng,
 map: gMap,
 draggable: false,
 icon: svgIcon,
 zIndex: 20
 });
 
svgMarker.setMap(gMap);