Menu
I have written this innocent javascript code, which lets the user create two markers and plot the route between them. It doesnt work, instead, it gives a weird error:
Uncaught TypeError: Cannot read property 'ya' of undefined
Can someone suggest me whats wrong here:
// called upon a click
GEvent.addListener(map, "click", function(overlay,point) {
if (isCreateHeadPoint) {
// add the head marker
headMarker = new GMarker(point,{icon:redIcon,title:'Head'});
map.addOverlay(headMarker);
isCreateHeadPoint = false;
} else {
// add the tail marker
tailMarker = new GMarker(point,{icon:greenIcon,title:'Tail'});
map.addOverlay(tailMarker);
isCreateHeadPoint = true;
// create a path from head to tail
direction.load("from:" + headMarker.getPoint().lat()+ ", " + headMarker.getPoint().lng()+ " to:" + tailMarker.getPoint().lat() + "," + tailMarker.getPoint().lng(), { getPolyline: true, getSteps: true });
// display the path
map.addOverlay(direction.getPolyline());
}
});
283
You can draw a route on Google Maps that includes a driving, walking, or cycling route and save it or share it with others. To create a route, open "Your places" in the menu on Google Maps and then choose "Create Map" on the Maps tab.
To measure the distance between two points: On your computer, open Google Maps. Right-click on your starting point. Select Measure distance.
Following from your solution, you may not need to use map.addOverlay(direction.getPolyline()) at all. The polyline gets added to the map automatically in the following example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps GDirections</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var map = new GMap2(document.getElementById("map"));
var directions = new GDirections(map);
var isCreateHeadPoint = true;
var headMarker, tailMarker;
map.setCenter(new GLatLng(51.50, -0.12), 12);
GEvent.addListener(map, "click", function(overlay,point) {
if (isCreateHeadPoint) {
// add the head marker
headMarker = new GMarker(point);
map.addOverlay(headMarker);
isCreateHeadPoint = false;
}
else {
// add the tail marker
tailMarker = new GMarker(point);
map.addOverlay(tailMarker);
isCreateHeadPoint = true;
// create a path from head to tail
directions.load("from:" + headMarker.getPoint().lat()+ ", " +
headMarker.getPoint().lng() +
" to:" + tailMarker.getPoint().lat() + "," +
tailMarker.getPoint().lng(),
{ getPolyline: true, getSteps: true });
}
});
</script>
</body>
</html>
Screenshot:
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
