title: create a polyline with multiple points, then join an added marker to a line segment google maps v3
body: <p>I have a google map that I am plotting a route on and linking my points with a polyline.  I create a new point on the line with a right click on the map.  I also have the ability to create a point of interest along my path and I'm using a different marker icon for those as well as showing an info window with the POI text.</p>
  
  <pre><code>google.maps.event.addListener(Map, "rightclick", function (event) {
  
              var markerIndex = polyLine.getPath().length;
              polyLine.setMap(Map);
              var isFirstMarker = markerIndex === 0;
              var marker;
              var poiText = "";
              if(!isAddingPOI) {
                  marker = new google.maps.Marker({
                      map: Map,
                      position: event.latLng,
                      draggable: true,
                      icon: '/images/waypoint.png'
                  });
              } else {
                  poiText = prompt("Enter a short description for this point of interest", "");
                  if (poiText != null) {
                      marker = new google.maps.Marker({
                          map: Map,
                          position: event.latLng,
                          draggable: true,
                          icon: '/images/point_of_interest.png',
                          info: new google.maps.InfoWindow({
                              content:poiText
                          })
                      });
  
                  }
              }
  
              if (isAddingPOI) {
                  predefinedPositions.push(new predefinedPosition(event.latLng.lat(), event.latLng.lng(), poiText));
                  google.maps.event.addListener(marker, 'click', function () {
                      marker.info.open(Map, marker);
                  });
                  isAddingPOI = false;
              } else {
                  predefinedPositions.push(new predefinedPosition(event.latLng.lat(), event.latLng.lng()));
              }
  
              polyLine.getPath().push(event.latLng);
  
              outlineMarkers.push(marker);
  
              google.maps.event.addListener(marker, 'drag', function (dragEvent) {
                  polyLine.getPath().setAt(markerIndex, dragEvent.latLng);
                  predefinedPositions[markerIndex].Latitude = dragEvent.latLng.lat();
                  predefinedPositions[markerIndex].Longitude = dragEvent.latLng.lng();
                  updateDistance(outlineMarkers);
              });                
  
              updateDistance(outlineMarkers);
          });
  </code></pre>
  
  <p>what I need now is the ability for the user to specify a LatLng for a new marker which would be placed on the map as draggable and then to be able to merge (by dragging) that marker to my created path.  Ideally, I'd like for the segment of the polyline where the marker is dragged to change colors while the marker is over it.  I'll then need to add that marker to the path array for the final output.</p>
  
  <p>I found this which is the closest to what I want that I could find but it's not quite what I'm looking for: <a href="https://stackoverflow.com/questions/31816185/google-maps-api-v3-draggable-marker-along-a-polyline">Google Maps API v3 - Draggable Marker Along a Polyline</a></p>
  
  <p>I also tried adding a 'mouseover' event to my polyline to update the color which doesn't ever get triggered while I'm dragging a marker.  It also updates the entire polyline's color (not just the segment) when I mouse over it.  I'm sure I can sort out the segment color change myself, but I'm stuck on dragging the marker over the line and having it change colors and ultimately merging it to my path.</p>
  
  <p>any suggestions would be greatly appreciated.</p>
  
  <p>TIA</p>