How to place markers on a preexisting polyline?

Question

A polyline is already been drawn a map, but how can markers be placed on it?

Current code:

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

loadShowDates();

var polyFutureOptions = {
    path: pathFutureCoordinates,
    strokeColor: '#0000FF',
    strokeOpacity: 0.8,
    strokeWeight: 2.5
};

var polyPastOptions = {
    path: pathPastCoordinates,
    strokeColor: '#FF0000',
    strokeOpacity: 0.6,
    strokeWeight: 2.5
};

pathPast = new google.maps.Polyline(polyPastOptions);
pathFuture = new google.maps.Polyline(polyFutureOptions);
pathPast.setMap(map);
pathFuture.setMap(map);
infowindow = new google.maps.InfoWindow();
map.fitBounds(bounds);

There are two sets of points: pathFutureCoordinates and pathPastCoordinates and these refer to gigs in the past and gigs in the future all on a tour route (polyline). Each set of markers could be a different color.

What would I use to do this please?

Any other tips? A custom marker would be ideal.

Site page in question: http://goo.gl/H995E

Answer 1

Here's a page where markers are placed either to extend the single polyline (click on the map), or when a spot in the polyline is clicked, a marker is added to the polyline. You can check if the new marker was correctly placed by dragging it and seeing the line adjust the segments.

https://files.nyu.edu/hc742/public/googlemaps/distance2.html

I'm not sure if you are planning to add new markers on the line by clicking or not. I will describe how the markers are added with clicks in the page above. Having a pre-built list of LatLngs would be a lot simpler (you only need steps 3 and 4 below).

1. Add listener to detect clicks on the line (the line is made thick to aid in clicking)
2. Figure out which segment of the line was clicked
3. Add the marker to an array of markers, placing it in the right position (order, based on which markers the new one are surrounding it)
4. Redraw the line using the new array of marker LatLngs.

A click listener is added to the line.

  google.maps.event.addListener(line, 'click', function(event) {
      for (var i = 0 ; i < markers.length - 1; i++) {
        if(isPointOnSegment(markers[i].getPosition(),
           markers[i+1].getPosition(),event.latLng)) {
          addMarker(event.latLng, i+1);
          break;
        } 
      }
    });
  }

Because we need to know which segment was clicked, a helper function is called (isPointOnSegment)

  function isPointOnSegment(gpsPoint1, gpsPoint2, gpsPoint ){

    //Provided by Engineer
    // http://stackoverflow.com/questions/10018003/which-segment-of-a-polyline-was-clicked
    // 1st version, ignores perfectly horiz and vert. lines
    var p1 = map.getProjection().fromLatLngToPoint( gpsPoint1 );
    var p2 = map.getProjection().fromLatLngToPoint( gpsPoint2 );
    var p = map.getProjection().fromLatLngToPoint( gpsPoint );

    var t_x = (p.x - p1.x)/(p2.x-p1.x);
    var t_y = (p.y - p1.y)/(p2.y-p1.y);
    return ( eq(t_x,t_y) && t_x >= 0 && t_x <= 1 && t_y >= 0 && t_y <= 1);
  } 

Add marker and update marker position array:

    function addMarker(pos, where) {

    var marker = new google.maps.Marker({
      map: map,
      position: pos,
      draggable: true
    });

    markers.splice(where,0,marker); 
    drawPath();
   }

Finally, redraw the line

  function drawPath() {
    countMarkers();
    var coords = [];
    for (var i = 0; i < markers.length; i++) {
      coords.push(markers[i].getPosition());
    }
    line.setPath(coords);
  }

For adding markers where there are pre-existing coordinates

http://jsfiddle.net/WZqgE/1/

  var pathFutureCoordinates = [
    new google.maps.LatLng(40, -80),
    new google.maps.LatLng(38, -85),
    new google.maps.LatLng(39, -92),
    new google.maps.LatLng(42, -98),
    new google.maps.LatLng(37, -102)      
  ];
  for (var i = 0; i < pathFutureCoordinates.length; i++) {
    new google.maps.Marker({
      map: map,
      position: pathFutureCoordinates[i],
      icon: "http://maps.google.com/mapfiles/kml/pal4/icon39.png"
    });
  }