CUSTOM SYMBOLS

Add custom symbols to map.
function initialize() {
  var myLatLng = new google.maps.LatLng(20.291, 153.027);
  var mapOptions = {
    zoom: 6,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

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

  var lineCoordinates = [
    new google.maps.LatLng(22.291, 153.027),
    new google.maps.LatLng(18.291, 153.027)
  ];

  var symbolOne = {
    path: \'M -2,0 0,-2 2,0 0,2 z\',
    strokeColor: \'#F00\',
    fillColor: \'#F00\',
    fillOpacity: 1
  };

  var symbolTwo = {
    path: \'M -2,-2 2,2 M 2,-2 -2,2\',
    strokeColor: \'#292\',
    strokeWeight: 4
  };

  var symbolThree = {
    path: \'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3\',
    strokeColor: \'#00F\',
    rotation: 0
  };

  var line = new google.maps.Polyline({
    path: lineCoordinates,
    icons: [{
      icon: symbolOne,
      offset: \'0%\'
      }, {
        icon: symbolTwo,
        offset: \'50%\'
      }, {
        icon: symbolThree,
        offset: \'100%\'
      }
    ],
    map: map
  });
}

google.maps.event.addDomListener(window, \'load\', initialize);