Currently I have lines plotted on a map using Google maps & fusion tables utilizing Jquery & AJAX
What I am in need of is plotting a point along a line. What I have is
A. Start Co-ordinates sample 39.793147, -86.238922
B. Finish Co-ordinates sample 39.799276, -86.238922
C. Distance from Start to plot Point sample 500 meters
D. (calculated co-ordinate) 39.797797,-86.238922
So my question is what is the best or what options do I have to be able to calculate D. ... The sample is a straight line having the same Longitude but in reality the Lat & Long will be different.
Sample alternate scenario eg Start 39.793147, -86.238922 End 39.801703,-86.237062 or the line may have multiple points
eg
<LineString><coordinates>-86.238922,39.793147 -86.238922,39.797797 -86.238829,39.800122 -86.237062,39.801703</coordinates></LineString>
I hope I have explained what I am trying to achieve. Will this be possible having the points and having the distance required to plot between these two points?
Look forward to any ideas or sample on this. Many thanks as always
one option would be to use the .GetPointAtDistance function from Mike Williams' epoly library
code snippet:
var map;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var lineString = [
[-86.238922, 39.793147],
[-86.238922, 39.797797],
[-86.238829, 39.800122],
[-86.237062, 39.801703]
];
var path = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < lineString.length; i++) {
var pt = new google.maps.LatLng(lineString[i][1], lineString[i][0]);
bounds.extend(pt);
path.push(pt);
}
var polyline = new google.maps.Polyline({
map: map,
path: path
});
map.fitBounds(bounds);
var sMark = new google.maps.Marker({
position: {
lat: lineString[0][1],
lng: lineString[0][0]
},
map: map,
title: "Start",
icon: "http://www.google.com/mapfiles/markerS.png"
});
var mark = new google.maps.Marker({
position: polyline.GetPointAtDistance(500),
map: map,
title: "500m"
});
}
google.maps.event.addDomListener(window, "load", initialize);
/*********************************************************************\
* *
* epolys.js by Mike Williams *
* updated to API v3 by Larry Ross *
* *
* A Google Maps API Extension *
* *
* Adds various Methods to google.maps.Polygon and google.maps.Polyline *
* .GetPointAtDistance() returns a GLatLng at the specified distance *
* along the path. *
* The distance is specified in metres *
* Reurns null if the path is shorter than that *
* *
***********************************************************************
* *
* This Javascript is provided by Mike Williams *
* Blackpool Community Church Javascript Team *
* http://www.blackpoolchurch.org/ *
* http://econym.org.uk/gmap/ *
* *
* This work is licenced under a Creative Commons Licence *
* http://creativecommons.org/licenses/by/2.0/uk/ *
* *
***********************************************************************
* *
* Version 1.1 6-Jun-2007 *
* Version 1.2 1-Jul-2007 - fix: Bounds was omitting vertex zero *
* add: Bearing *
* Version 1.3 28-Nov-2008 add: GetPointsAtDistance() *
* Version 1.4 12-Jan-2009 fix: GetPointsAtDistance() *
* Version 3.0 11-Aug-2010 update to v3 *
* *
\*********************************************************************/
// === A method which returns a GLatLng of a point a given distance along the path ===
// === Returns null if the path is shorter than the specified distance ===
google.maps.Polygon.prototype.GetPointAtDistance = function(metres) {
// some awkward special cases
if (metres == 0) return this.getPath().getAt(0);
if (metres < 0) return null;
if (this.getPath().getLength() < 2) return null;
var dist = 0;
var olddist = 0;
for (var i = 1;
(i < this.getPath().getLength() && dist < metres); i++) {
olddist = dist;
dist += google.maps.geometry.spherical.computeDistanceBetween(this.getPath().getAt(i), this.getPath().getAt(i - 1));
}
if (dist < metres) {
return null;
}
var p1 = this.getPath().getAt(i - 2);
var p2 = this.getPath().getAt(i - 1);
var m = (metres - olddist) / (dist - olddist);
return new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng() + (p2.lng() - p1.lng()) * m);
}
// === Copy all the above functions to GPolyline ===
google.maps.Polyline.prototype.GetPointAtDistance = google.maps.Polygon.prototype.GetPointAtDistance;html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>