ansaurus

Question

google maps plot route between two points

Answer 1

A:

Oh I got it ... for some weird reason, I thought direction.load() is 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());
});

2010-05-17 12:03:43

Answer 2

A:

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;amp;v=2&amp;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

Daniel Vassallo 2010-05-17 12:11:36

damn! you stole my joy of discovering the correct answer ;) The magic is var directions = new GDirections(map); Great thanks for your answer

2010-05-17 12:28:33

@amarsh-anand: lol :) ... You can also remove the `getPolyline: true` option from the `GDirectionsOptions`, since by default it will still load the polyline when a map is attached to the directions object.

Daniel Vassallo 2010-05-17 12:33:04

thanks man. that was all cut / paste code. thanks for your help again

2010-05-17 12:39:21

ansaurus

tags:

views:

answers:

google maps plot route between two points

related questions