complex polyline

Customize a line on a map.

var poly;
var map;

function initialize() {
  var chicago = new google.maps.LatLng(41.879535, -87.624333);
  var mapOptions = {
    zoom: 7,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

  var polyOptions = {
    strokeColor: \'#000000\',
    strokeOpacity: 1.0,
    strokeWeight: 3
  }
  poly = new google.maps.Polyline(polyOptions);
  poly.setMap(map);

   Add a listener for the click event
  google.maps.event.addListener(map, \'click\', addLatLng);
}

**
 * Handles click events on a map, and adds a new point to the Polyline.
 * @param {google.maps.MouseEvent} event
 *
function addLatLng(event) {

  var path = poly.getPath();

   Because path is an MVCArray, we can simply append a new coordinate
   and it will automatically appear
  path.push(event.latLng);

   Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: \'#\' + path.getLength(),
    map: map
  });
}

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