All geek questions in one place

Google Maps displays the route between two points

I wrote this innocent javascript code that allows the user to create two markers and build a route between them. This does not work, a strange error occurs instead:

Uncaught TypeError: Cannot read property 'ya' of undefined

Can someone tell me what is 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()); } });
+4
source share
2 answers

Following from your solution , you might not need to use map.addOverlay(direction.getPolyline()) . A polyline is automatically added to the map 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&amp;v=2&amp;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:

Google Maps GDirections

+7
source

Oh, I get it ... for some strange reason, I thought direction.load () was a blocking call. The following works:

 // 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 }); } }); // called when the direction.load() returns GEvent.addListener(direction,"load", function() { // display the path map.addOverlay(direction.getPolyline()); });
0
source

Source: https://habr.com/ru/post/1309976/

More articles:


All Articles