Question

115

google maps plot route between two points

rated 0 times [ 117] [ 2] / answers: 1 / hits: 19971 / 14 Years ago, mon, may 17, 2010, 12:00:00

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());

    }

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

makaylahk

Add To Favorites

Follow

Total Points: 166

Total Questions: 94

Total Answers: 117

Location: Gabon

Member since Sat, Jul 25, 2020

4 Years ago

makaylahk questions

1 Electron store data locally without localstorage

Tue, Apr 26, 22, 00:00, 2 Years ago

1 Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response when using http get req from JS to SlackAPI

Mon, Feb 28, 22, 00:00, 2 Years ago

1 How do I use the useState hook to change the color of my react icons to blue?

Wed, Jul 21, 21, 00:00, 3 Years ago

1 Property 'selectionStart' does not exist on type 'EventTarget'

Fri, Mar 19, 21, 00:00, 3 Years ago

1 How can I pass multiple values in a single prop in react?

Sat, Feb 27, 21, 00:00, 3 Years ago

View All

answered 14 Years ago diontajm · Accepted Answer

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&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