UPDATE: click on the polyline and the start and end points will have markers at the top.
Here is one way to do this JSFiddle Demo . Essentially, using the click event property on the Google LatLng map, we get the Lat and Lng of the mouse click location relative to the map. Using this LatLng along with the points on the polyline, we can determine if the target points are in a straight line with two points on the polyline. In addition, we need to use the Geo Distance formula to calculate whether two adjacent points are on the polyline and the target point is on the same line. If they are then subtracted from the sum of points a and the target, target and point b from the sum of points a and point b, the distance difference should be closest to zero. Thus, using this Geo Distance formula and the toRad () function, we can get the distance between three points.
UPDATE No. 2:
Q1: the if statement above basically expands the built-in Number function to include the toRad function toRad which converts numerical degrees to radians. This is used to calculate the difference in geographical distances between two geographical points.
Q2: distanceBetween function
uses the "haversine" formula to calculate the distances between two points, that is, the shortest distance above the earth's surface, and gives the distance "in a straight line" between the points (ignoring any hills!).
if (typeof(Number.prototype.toRad) === "undefined") { Number.prototype.toRad = function() { return this * Math.PI / 180; } } var markerDist; var startPointMarker = new google.maps.Marker(); var endPointMarker = new google.maps.Marker(); var map; function distanceBetween(lat1, lat2, lon1, lon2) { var R = 6371; // km var dLat = (lat2 - lat1).toRad(); var dLon = (lon2 - lon1).toRad(); var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * Math.sin(dLon / 2) * Math.sin(dLon / 2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); var d = R * c; return parseFloat(d); } function initialize() { var myLatLng = new google.maps.LatLng(0, -180); var myOptions = { zoom: 2, center: myLatLng, mapTypeId: google.maps.MapTypeId.TERRAIN }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var flightPlanCoordinates = [new google.maps.LatLng(-27.46758, 153.027892), new google.maps.LatLng(37.772323, -122.214897), new google.maps.LatLng(29.46758, 88.027892), new google.maps.LatLng(20.46758, 97.027892), new google.maps.LatLng(17.772323, 78.214897)]; var flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2 }); google.maps.event.addListener(flightPath, 'click', function(el) { markerDist = {p1:'', p2:'', d:-1}; startPointMarker.setMap(null); endPointMarker.setMap(null); var curLat = el.latLng.lat(); var curLng = el.latLng.lng(); var allPoints = this.getPath().getArray(); for (var i = 0; i < allPoints.length - 1; i++) { var ab = distanceBetween(allPoints[i].lat(), curLat, allPoints[i].lng(), curLng); var bc = distanceBetween(curLat, allPoints[i + 1].lat(), curLng, allPoints[i + 1].lng()); var ac = distanceBetween(allPoints[i].lat(), allPoints[i + 1].lat(), allPoints[i].lng(), allPoints[i + 1].lng()); console.log(parseFloat(markerDist.d) + ' '+ Math.abs(ab+bc-ac)); if ((parseFloat(markerDist.d) == -1) || parseFloat(markerDist.d) > parseFloat(Math.abs(ab + bc - ac))) { markerDist.p1 = allPoints[i]; markerDist.p2 = allPoints[i + 1]; markerDist.d = Math.abs(ab + bc - ac); } } startPointMarker.setPosition(markerDist.p1); endPointMarker.setPosition(markerDist.p2); startPointMarker.setMap(map); endPointMarker.setMap(map); }); flightPath.setMap(map); } window.onload = initialize;