Maps API v3 SVG markers

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>

CSS

#map-canvas 
{ 
height: 400px; 
width: 500px;
}

JavaScript

var map;
var polyLine;
var polyOptions;

function initialize() {
    
    var mapOptions = {
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(0,0)
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var lineSymbol = {
        path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
        scale:1.5
    };

    polyOptions = {
        strokeColor: '#0026b3',
        strokeOpacity: 1.0,
        strokeWeight: 1,
        geodesic: true,
        icons: [{
            icon: lineSymbol,
            repeat: '100px'
        }],
        zIndex: 10
    };

    polyLine = new google.maps.Polyline(polyOptions);
    polyLine.setMap(map);
    
    google.maps.event.addListener(map, 'click', function(event) {
        addPoint(event);
    });
}

function addPoint(event) {
 
    var path = polyLine.getPath();
    path.push(event.latLng);

    var icon = {
        
        path: "M68.501,23.781 43.752,48.529 66.918,71.695 66.918,120.362 70.085,120.362 70.085,71.694 93.249,48.529",
        fillColor: '#FF0000',
        fillOpacity: .8,
        anchor: new google.maps.Point(70.085, 120.362),
        strokeWeight: 0,
        scale:.4
    };

    var marker = new google.maps.Marker({
        position: event.latLng,
        map: map,
        draggable: false,
        icon: icon,
        zIndex : -20
    });

    // Will fix drawing bug for SVG
    map.panTo(event.latLng);
}

initialize();