Google Map Geolocation Error - google-maps-api-3

I am given the location (lat and long) but the location is not correct, the decimal point is not placed right. So, I was told to do the conversion with this code:
var location = "N1433.704483,E12100.012501";
var latlngarr = location[1].split(",");
if (latlngarr) {
longitude = latlngarr[1]; //经度
if (longitude.indexOf("E") >= 0) {
longitude = longitude.substring(1);
var degree = longitude / 100 | 0; //除100后取整。
var cent = (longitude - degree * 100); //分的部分。
longitude = degree + cent / 60.0;
} else if (longitude.indexOf("W") >= 0) {
longitude = longitude.substring(1);
var degree = longitude / 100 | 0; //除100后取整。
var cent = (longitude - degree * 100); //分的部分。
longitude = degree + cent / 60.0;
}
latitude = latlngarr[0]; //纬度
if (latitude.indexOf("N") >= 0) {
latitude = latitude.substring(1);
var degree = latitude / 100 | 0; //除100后取整。
var cent = (latitude - degree * 100); //分的部分。
latitude = degree + cent / 60.0;
} else if (latitude.indexOf("S") >= 0) {
latitude = latitude.substring(1);
var degree = latitude / 100 | 0; //除100后取整。
var cent = (latitude - degree * 100); //分的部分。
latitude = degree + cent / 60.0;
}
}
But when I try to put it inside my code the page says "Object Not Found!" Here is my full code.
var location = "N1433.704483,E12100.012501";
var latlngarr = location[1].split(",");
if (latlngarr) {
longitude = latlngarr[1]; //经度
if (longitude.indexOf("E") >= 0) {
longitude = longitude.substring(1);
var degree = longitude / 100 | 0; //除100后取整。
var cent = (longitude - degree * 100); //分的部分。
longitude = degree + cent / 60.0;
} else if (longitude.indexOf("W") >= 0) {
longitude = longitude.substring(1);
var degree = longitude / 100 | 0; //除100后取整。
var cent = (longitude - degree * 100); //分的部分。
longitude = degree + cent / 60.0;
}
latitude = latlngarr[0]; //纬度
if (latitude.indexOf("N") >= 0) {
latitude = latitude.substring(1);
var degree = latitude / 100 | 0; //除100后取整。
var cent = (latitude - degree * 100); //分的部分。
latitude = degree + cent / 60.0;
} else if (latitude.indexOf("S") >= 0) {
latitude = latitude.substring(1);
var degree = latitude / 100 | 0; //除100后取整。
var cent = (latitude - degree * 100); //分的部分。
latitude = degree + cent / 60.0;
}
}
var locations = [
['Bondi Beach', latitude, longitude],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(14.5833, 120.9667),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
Can anyone tell me what's wrong with my code?

location isn't an array, it is a string, so location[1] doesn't make sense. "location" is a bad name for a variable, it tends to change the URL of the page in some browsers.
var location = "N1433.704483,E12100.012501";
var latlngarr = location[1].split(",");
should be:
var plocation = "N1433.704483,E12100.012501";
var latlngarr = plocation.split(",");

Related

Rotation in react application

I am trying to make a game where I have to move the plane in circular motion. However, when it reaches 90 degree or certain angle it still points in same direction as it is still image. I want to update the position on a circle with the state of react but image should also move and not point in same direction. aeroplane move circular
Currently the head is in east direction, at 0 degree. Now if the react state has value 90 degree i want it to move on this circle 90 degree but also now point upwards in north direction . Anyhelp?
Yes I tried it but does not seem to be working. I was using canvas earlier.....................
class Louie extends Component {
constructor(props) {
super(props);
this.update = this.update.bind(this);
this.rotateImage = this.rotateImage.bind(this);
}
componentDidMount() {
this.props.dispatch(getStats());
this.canvas = this.refs.canvas;
this.ctx = this.canvas.getContext("2d");
this.image = new Image();
this.image.src = require("../../Images/louie-front.png");
this.image.id = "lpl-head";
this.image.style.transform = "rotate(90deg)";
this.camera = {};
this.camera.x = 0;
this.camera.y = 0;
this.scale = 1.0;
this.obj = [];
this.t = {};
this.t.angle = Math.random() * Math.PI * 2; //start angle
this.t.radius = document.getElementById("louie-canvas").offsetHeight - 100;
this.t.x = Math.cos(this.t.angle) * this.t.radius; // start position x
this.t.y = Math.sin(this.t.angle) * this.t.radius; //start position y
this.t.circumference = this.t.radius * 2 * Math.PI; //curcumfrence
this.t.start = Date.now();
this.obj.push(this.t);
this.draw();
}
draw = () => {
this.update();
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.save();
this.ctx.translate(
0 - (this.camera.x - this.canvas.width / 2),
0 - (this.camera.y - this.canvas.height / 2)
);
this.ctx.scale(this.scale, this.scale);
this.ctx.fillStyle = "blue";
for (var i = 0; i < this.obj.length; i++) {
this.ctx.beginPath();
this.ctx.arc(0, 0, this.obj[i].radius, 0, Math.PI * 2);
this.ctx.lineWidth = 5;
this.ctx.strokeStyle = "#949494";
this.ctx.shadowBlur = 15;
this.ctx.shadowColor = "#080808";
this.ctx.shadowOffsetX = 10;
this.ctx.shadowOffsetY = 5;
this.ctx.stroke();
this.ctx.drawImage(
this.image,
this.obj[i].x - (window.innerWidth * 4) / 100,
this.obj[i].y - (window.innerWidth * 3) / 100,
(window.innerWidth * 8) / 100,
(window.innerHeight * 10) / 100
);
}
this.ctx.fillStyle = "#ab377a";
this.ctx.beginPath();
this.ctx.arc(0, 0, 10, 0, 2 * Math.PI);
this.ctx.closePath();
this.ctx.fill();
this.ctx.restore();
requestAnimationFrame(this.draw);
};
update = () => {
for (var i = 0; i < this.obj.length; i++) {
var angle = this.props.headDegree;
this.obj[i].x = this.obj[i].radius * Math.cos((angle * Math.PI) / 180);
this.obj[i].y = this.obj[i].radius * Math.sin((angle * Math.PI) / 180);
}
};
rotateImage = (angle) => {
this.image.style.transform = `rotateZ(${angle * 3}deg)`;
};

Google maps api v3 - divide region into equal parts using tiles

I am currently working on dividing the region into equal parts and display those parts to the user on the map either using tiles or rectangles whichever looks nice. I know the latitude and longitude of the region. I am using the following code. There are couple of requirements given below.
(1) Using this code, I am not able to divide the region into exact equal parts.
(2) After dividing by tiles or rectangles, how to get the center of each tile.
Any help would be appreciated.
function initialize() {
var myLatlng;
var mapOptions;
myLatlng = new google.maps.LatLng(29.98439980, -95.34140015);
mapOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map-canvas"), mapOptions);
google.maps.event.addListenerOnce(map, 'idle', function() {
drawRectangle(map);
});
function drawRectangle(map) {
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var numberOfParts = 4;
var tileWidth = (northEast.lng() - southWest.lng()) / numberOfParts;
var tileHeight = (northEast.lat() - southWest.lat()) / numberOfParts;
for (var x = 0; x < numberOfParts; x++) {
for (var y = 0; y < numberOfParts; y++) {
var areaBounds = {
north: northEast.lat() + (tileHeight * y),
south: southWest.lat(),
east: northEast.lng(),
west: southWest.lng() + (tileWidth * x)
};
var area = new google.maps.Rectangle({
strokeColor: '#FF0000',
//strokeOpacity: 0.8,
strokeWeight: 2,
//fillColor: '#FF0000',
//fillOpacity: 0.35,
map: map,
bounds: areaBounds
});
}
}
}
}
google.maps.event.addDomListener(window, "load", initialize);
Increment both the edges of the square as you iterate through the values and fix the start point as the lower left corner:
function drawRectangle(map) {
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var numberOfParts = 4;
var tileWidth = (northEast.lng() - southWest.lng()) / numberOfParts;
var tileHeight = (northEast.lat() - southWest.lat()) / numberOfParts;
for (var x = 0; x < numberOfParts; x++) {
for (var y = 0; y < numberOfParts; y++) {
var areaBounds = {
north: southWest.lat() + (tileHeight * (y+1)),
south: southWest.lat() + (tileHeight * y),
east: southWest.lng() + (tileWidth * (x+1)),
west: southWest.lng() + (tileWidth * x)
};
var area = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeWeight: 2,
map: map,
bounds: areaBounds
});
}
}
}
proof of concept fiddle
code snippet:
function initialize() {
var myLatlng;
var mapOptions;
myLatlng = new google.maps.LatLng(29.98439980, -95.34140015);
mapOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map-canvas"), mapOptions);
google.maps.event.addListenerOnce(map, 'idle', function() {
drawRectangle(map);
});
function drawRectangle(map) {
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var numberOfParts = 4;
var tileWidth = (northEast.lng() - southWest.lng()) / numberOfParts;
var tileHeight = (northEast.lat() - southWest.lat()) / numberOfParts;
for (var x = 0; x < numberOfParts; x++) {
for (var y = 0; y < numberOfParts; y++) {
var areaBounds = {
north: southWest.lat() + (tileHeight * (y + 1)),
south: southWest.lat() + (tileHeight * y),
east: southWest.lng() + (tileWidth * (x + 1)),
west: southWest.lng() + (tileWidth * x)
};
var area = new google.maps.Rectangle({
strokeColor: '#FF0000',
//strokeOpacity: 0.8,
strokeWeight: 2,
//fillColor: '#FF0000',
//fillOpacity: 0.35,
map: map,
bounds: areaBounds
});
}
}
}
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

How can I get rotated rectangle corner points from side points

Say I have a set of four or more points that are on the perimeter of a rectangle, and that the rectangle is rotated by some unknown amount. I know that at least one point is on each side of the rectangle. One arbitrary side point is designated (0, 0), and the other points are the distance from this starting point. How can I get the non-rotated corner points of this rectangle?
assuming you're not trying to find a unique solution:
rotate your points around 0,0 until the top-most, bottom-most,
left-most, and right-most points are all different points
draw horizontal lines through the top-most and bottom-most, and vertical lines through the left-most and right-most
you're done
var points = [];
var bs = document.body.style;
var ds = document.documentElement.style;
bs.height = bs.width = ds.height = ds.width = "100%";
bs.border = bs.margin = bs.padding = 0;
var c = document.createElement("canvas");
c.style.display = "block";
c.addEventListener("mousedown", addPoint, false);
document.body.appendChild(c);
var ctx = c.getContext("2d");
var interval;
function addPoint(e) {
if (points.length >= 4) points = [];
points.push({
x: e.x - c.offsetLeft,
y: e.y - c.offsetTop
});
while (points.length > 4) points.shift();
redraw();
}
function rotateAround(a, b, r) {
d = {x:a.x - b.x, y:a.y - b.y};
return {
x: b.x + Math.cos(r) * d.x - Math.sin(r) * d.y,
y: b.y + Math.cos(r) * d.y + Math.sin(r) * d.x
}
}
function drawPoint(p) {
ctx.strokeStyle = "rgb(0,0,0)";
ctx.beginPath();
ctx.arc(p.x, p.y, 10, 0, 2 * Math.PI, true);
ctx.closePath();
ctx.stroke();
}
var last_few = [];
function redraw() {
if (interval) clearInterval(interval);
last_few = [];
c.width = window.innerWidth;
c.height = window.innerHeight;
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillStyle = "rgb(200, 200, 200)";
ctx.font = "40px serif";
if (points.length < 4) {
ctx.fillText("click " + (4 - points.length) + " times", 20, 40);
points.forEach(drawPoint);
} else {
var average = {x:0, y:0};
points.forEach(function (p) {
average.x += p.x / 4;
average.y += p.y / 4;
});
var step = 0;
interval = setInterval(function () {
ctx.clearRect(0, 0, c.width, c.height);
ctx.fillText("click anywhere to start over", 20, 40);
last_few.forEach(function(r) {
ctx.strokeStyle = "rgb(200,255,200)";
ctx.save();
ctx.translate(average.x, average.y);
ctx.rotate((step -r.step) * Math.PI / 180);
ctx.strokeRect(r.lm - average.x, r.tm - average.y, (r.rm - r.lm), (r.bm - r.tm));
ctx.restore();
});
var tm = Infinity;
var bm = -Infinity;
var lm = Infinity;
var rm = -Infinity;
points.forEach(function (p) {
p = rotateAround(p, average, step * Math.PI / 180);
drawPoint(p);
tm = Math.min(p.y, tm);
bm = Math.max(p.y, bm);
lm = Math.min(p.x, lm);
rm = Math.max(p.x, rm);
});
if (points.every(function (p) {
p = rotateAround(p, average, step * Math.PI / 180);
return (p.x == lm) || (p.x == rm) || (p.y == tm) || (p.y == bm);
})) {
ctx.strokeStyle = "rgb(0,255,0)";
ctx.strokeRect(lm, tm, (rm - lm), (bm - tm));
last_few.push({tm:tm, bm:bm, lm:lm, rm:rm, step:step});
while(last_few.length > 30) last_few.shift();
} else {
ctx.strokeStyle = "rgb(255,0,0)";
ctx.strokeRect(lm, tm, (rm - lm), (bm - tm));
}
step++;
}, 30);
}
}
window.onresize = redraw;
redraw();

Paperjs inserting segments to a rectangle gives strange result

I am trying to add random segments along the path of a rectangle. Here is my jsfiddle http://jsfiddle.net/hhND7/1/
<canvas id='canvas' resize style='' style='padding:0; margin:0;'></canvas>
<script type="text/paperscript" canvas="canvas" >
var rect = new Path.Rectangle({x:200, y:100}, new Size(80, 100))
rect.strokeColor = 'gray'
rect.selected = true;
var pathCuts = rands(20, 0, 360).sort(function(a,b){return a - b});
var tArr = [];
for ( var i=0; i<pathCuts.length; i++){
var loc = rect.getLocationAt(pathCuts[i]);
tArr.push(loc.point);
var sE = new Path.Circle(loc.point, 2);
sE.strokeColor = 'red';
}
rect.insertSegments(1, tArr);
function rands(n, min, max) {
var range = max - min;
if (range < n)
throw new RangeError("Specified number range smaller than count requested");
function shuffle() {
var deck = [], p, t;
for (var i = 0; i < range; ++i)
deck[i] = i + min;
for (i = range - 1; i > 0; --i) {
p = Math.floor(Math.random() * i);
t = deck[i];
deck[i] = deck[p];
deck[p] = t;
}
return deck.slice(0, n);
}
function find() {
var used = {}, rv = [], r;
while (rv.length < n) {
r = Math.floor(Math.random() * range + min);
if (!used[r]) {
used[r] = true;
rv.push(r);
}
}
return rv;
}
return range < 3 * n ? shuffle() : find();
}
</script>
I think the problem is with the insertSegments function. But i can not find a solution.
If you want it to still look like the original polygon, you need to sort in the positions of the original segments. Since you can replace a path's segments with an array of curveLocation , you can just add the locations of these points to tArr, then sort by each element by it's offset:
var pathCuts = rands(20, 0, rect.length);
var tArr = [];
for ( var i=0; i<pathCuts.length; i++){
var loc = rect.getLocationAt(pathCuts[i]);
tArr.push(loc);
var sE = new Path.Circle(loc.point, 2);
sE.strokeColor = 'red';
}
for ( var i = 0, l = rect.segments.length; i < l; i++){
tArr.push(rect.segments[i].location);
}
tArr.sort(function(a,b){return a.offset - b.offset})
rect.segments = tArr;

latLng from polyLine Percentage

How do I return a latLng value from a given percentage along a polyLine?
I have spent a day on this using interpolate and individual nodes. Is their an easier function out there that does the grunt work?
Google maps API v3
thanks!
http://www.geocodezip.com/scripts/v3_epoly.js
written for the Google Maps Javascript API v2 ported to v3. Documentation for the v2 version
Has these two methods:
.Distance() returns the length of the poly path
.GetPointAtDistance() returns a GLatLng at the specified distance
along the path.
The distance is specified in metres
Returns null if the path is shorter than that
This should work (if you include that script and your polyline variable is "polyline"):
var latlng = polyline.GetPointAtDistance(polyline.Distance()*(desired percentage)/100);
of course if you polyline isn't changing in length, it would be more efficient to compute the length once an use it each time you want to find a point on the polyline.
var polylength = polyline.Distance();
var latlng = polylength*(desired percentage)/100);
live example
code snippet:
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var polyline = null;
var marker;
var infowindow;
function createMarker(latlng, label, html) {
// alert("createMarker("+latlng+","+label+","+html+","+color+")");
var contentString = '<b>' + label + '</b><br>' + html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: label,
zIndex: Math.round(latlng.lat() * -100000) << 5,
contentString: contentString
});
marker.myname = label;
// gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.contentString);
infowindow.open(map, marker);
});
return marker;
}
var myLatLng = null;
var lat;
var lng;
var zoom = 2;
var maptype;
function initialize() {
infowindow = new google.maps.InfoWindow();
myLatLng = new google.maps.LatLng(37.422104808, -122.0838851);
maptype = google.maps.MapTypeId.ROADMAP;
// If there are any parameters at eh end of the URL, they will be in location.search
// looking something like "?marker=3"
// skip the first character, we are not interested in the "?"
var query = location.search.substring(1);
// split the rest at each "&" character to give a list of "argname=value" pairs
var pairs = query.split("&");
for (var i = 0; i < pairs.length; i++) {
// break each pair at the first "=" to obtain the argname and value
var pos = pairs[i].indexOf("=");
var argname = pairs[i].substring(0, pos).toLowerCase();
var value = pairs[i].substring(pos + 1);
// process each possible argname - use unescape() if theres any chance of spaces
if (argname == "filename") {
filename = unescape(value);
}
if (argname == "lat") {
lat = parseFloat(value);
}
if (argname == "lng") {
lng = parseFloat(value);
}
if (argname == "start") {
document.getElementById("start").value = decodeURI(value);
}
if (argname == "end") {
document.getElementById("end").value = decodeURI(value);
}
if (argname == "time") {
document.getElementById("time").value = decodeURI(value);
// putMarkerOnRoute(parseFloat(document.getElementById('time').value));
}
if (argname == "zoom") {
zoom = parseInt(value);
}
if (argname == "type") {
// from the v3 documentation 8/24/2010
// HYBRID This map type displays a transparent layer of major streets on satellite images.
// ROADMAP This map type displays a normal street map.
// SATELLITE This map type displays satellite images.
// TERRAIN This map type displays maps with physical features such as terrain and vegetation.
if (value == "m") {
maptype = google.maps.MapTypeId.ROADMAP;
}
if (value == "k") {
maptype = google.maps.MapTypeId.SATELLITE;
}
if (value == "h") {
maptype = google.maps.MapTypeId.HYBRID;
}
if (value == "t") {
maptype = google.maps.MapTypeId.TERRAIN;
}
}
}
if (!isNaN(lat) && !isNaN(lng)) {
myLatLng = new google.maps.LatLng(lat, lng);
}
var myOptions = {
zoom: zoom,
center: myLatLng,
mapTypeId: maptype
};
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true
});
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
polyline = new google.maps.Polyline({
path: [],
strokeColor: '#FF0000',
strokeWeight: 3
});
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var travelMode = google.maps.DirectionsTravelMode.DRIVING
var request = {
origin: start,
destination: end,
travelMode: travelMode
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
polyline.setPath([]);
var bounds = new google.maps.LatLngBounds();
startLocation = new Object();
endLocation = new Object();
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById("directions_panel");
summaryPanel.innerHTML = "";
// For each route, display summary information.
var path = response.routes[0].overview_path;
var legs = response.routes[0].legs;
for (i = 0; i < legs.length; i++) {
if (i == 0) {
startLocation.latlng = legs[i].start_location;
startLocation.address = legs[i].start_address;
// marker = google.maps.Marker({map:map,position: startLocation.latlng});
// marker = createMarker(legs[i].start_location,"start",legs[i].start_address,"green");
}
endLocation.latlng = legs[i].end_location;
endLocation.address = legs[i].end_address;
var steps = legs[i].steps;
for (j = 0; j < steps.length; j++) {
var nextSegment = steps[j].path;
for (k = 0; k < nextSegment.length; k++) {
polyline.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
}
}
}
polyline.setMap(map);
computeTotalDistance(response);
putMarkerOnRoute(parseFloat(document.getElementById('percent').value));
} else {
alert("directions response " + status);
}
});
}
var totalDist = 0;
var totalTime = 0;
function computeTotalDistance(result) {
totalDist = 0;
totalTime = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
totalDist += myroute.legs[i].distance.value;
totalTime += myroute.legs[i].duration.value;
}
totalDist = totalDist / 1000.
document.getElementById("total").innerHTML = "total distance is: " + totalDist + " km<br>total time is: " + (totalTime / 60).toFixed(2) + " minutes<br>average speed is: " + (totalDist / (totalTime / 3600)).toFixed(2) + " kph";
document.getElementById("totalTime").value = (totalTime / 60.).toFixed(2);
}
function putMarkerOnRoute(percent) {
if (percent > 100) {
percent = 100;
document.getElementById('percent').value = percent;
}
var distance = percent / 100 * totalDist * 1000;
// time = ((percentage/100) * totalTIme/60).toFixed(2);
// alert("Time:"+time+" totalTime:"+totalTime+" totalDist:"+totalDist+" dist:"+distance);
if (!marker) {
marker = createMarker(polyline.GetPointAtDistance(distance), "percent: " + percent, "marker");
} else {
marker.setPosition(polyline.GetPointAtDistance(distance));
marker.setTitle("percent:" + percent);
marker.contentString = "<b>percent: " + percent + "</b><br>distance: " + (distance / 1000).toFixed(2) + " km<br>marker";
google.maps.event.trigger(marker, "click");
}
}
google.maps.event.addDomListener(window, 'load', initialize);
// from epoly_v3.js
// modified to use geometry library for length of line segments
// === 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.Polyline.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);
}
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script>
<div id="tools">
start:
<input type="text" name="start" id="start" value="Hyderabad" /> end:
<input type="text" name="end" id="end" value="Bangalore" />
<input type="submit" onclick="calcRoute();" /><br /> percentage:
<input type="text" name="percent" id="percent" value="0" />
<input type="submit" onclick="putMarkerOnRoute(parseFloat(document.getElementById('percent').value));" /> total time:<input type="text" name="totalTime" id="totalTime" value="0" />
</div>
<div id="map_canvas" style="float:left;width:70%;height:100%;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
<div id="total"></div>
</div>

Resources