Sample program to create custom SVG Marker with Label for Google Map Api

Here is a sample program to create custom SVG Marker for Google Map Api. The marker will look like shown in the below image. You can change the color of the marker by passing the color as the parameter for the pinSymbol function.

HTML :

<div id="map_canvas" style="height: 400px; width: 100%;">

CSS :

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

JAVASCRIPT :

function initializeMap() {
 var center = new google.maps.LatLng(30.5, -98.35);;
  var markerLatLng = new google.maps.LatLng(30.5, -98.35);

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 12,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var marker = new google.maps.Marker({
        position: markerLatLng,
        map: map,
        draggable: true,
        raiseOnDrag: true,
        label: { text: 'WXYZ', color: '#fff', fontSize: '12px' },
        icon: pinSymbol('green')
    });
}

function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 2,
        labelOrigin: new google.maps.Point(0, -30)
    };
}

OUTPUT IMAGE :