Cabeza de flecha en polilínea google map v3

Question

Me gustaría crear un mapa que muestre el camino recorrido por un vehículo. El mapa debe mostrar la punta de la flecha para cada giro.

Necesito mostrar el mapa como este .

Puedo crear el mapa con el siguiente código

 var flightPlanCoordinates = [
        new google.maps.LatLng(10.51178,76.197739),
        new google.maps.LatLng(10.512117,76.261253),
        new google.maps.LatLng(10.554309,76.322365),
        new google.maps.LatLng(10.56646,76.372833)
    ];
    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      strokeColor: '#04770C',
      strokeOpacity: 1.0,
      strokeWeight: 2
    });

    flightPath.setMap(map);

Estoy utilizando la API de Google Maps V3.

Answer 1

El ejemplo de Google Map pero actualizado para la v3 es:

  // Creates markers with corresponding triangle icons
 ArrowHandler.prototype.create = function(p1, p2, mode) {
   var markerpos;
   var g = google.maps;
   if (mode == "onset") markerpos = p1;
   else if (mode == "head") markerpos = this.usePixelOffset(p1, p2);
   else if (mode == "midline") markerpos = g.geometry.spherical.interpolate(p1, p2, .5);

   // Compute the bearing of the line in degrees
   var dir = g.geometry.spherical.computeHeading(p1, p2).toFixed(1);
    // round it to a multiple of 3 and correct unusable numbers
    dir = Math.round(dir/3) * 3;
    if (dir < 0) dir += 240;
    if (dir > 117) dir -= 120;
    // use the corresponding icon
    var icon = this.addIcon("dir_" +dir+ ".png");
    var marker = new g.Marker({position: markerpos,
     map: map, icon: icon, clickable: false
    });
    if (mode == "head") {
     // Store markers with 'head' arrows to adjust their offset position on zoom change
     marker.p1 = p1;
     marker.p2 = p2;
     // marker.setValues({ p1: p1, p2: p2 });
     this.arrowheads.push(marker);
    }
  };

 ArrowHandler.prototype.load = function (points, mode) {
    for (var i = 0; i < points.length-1; i++) {
      var p1 = points[i],
      p2 = points[i + 1];
      this.create(p1, p2, mode); 
    }
 };

Ejemplo: http://www.wolfpil.de/v3/arrow-heads.html