Hi all,

I have integrated google maps API into a site as a store finder. However I'm at the stage of trying to plot thte driving directions between a store and a user input address. The stage I am stumped at is getting the driving directions to plot themselves on the map and the textual directions to populate into the directions div tag.

I am calling the load method of the object created from the GDirections class but nothing is happening after that.

I have posted the relevant bits of code here in case anyone can help me. I am really quite stuck. Many thanks in advance if you can.

 function load() {
      if (GBrowserIsCompatible()) {
        geocoder = new GClientGeocoder();
        map = new GMap2(document.getElementById('map'));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(40, -100), 3);
      }
    }

        // === create a GDirections Object ===
    var gdir = new GDirections(map, document.getElementById("directions"));


     // === Array for decoding the failure codes ===
      var reasons=[];
      //reasons[G_GEO_SUCCESS]            = "Success";
      reasons[G_GEO_MISSING_ADDRESS]    = "Missing Address: The address was either missing or had no value.";
      reasons[G_GEO_UNKNOWN_ADDRESS]    = "Unknown Address:  No corresponding geographic location could be found for the specified address.";
      reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address:  The geocode for the given address cannot be returned due to legal or contractual reasons.";
      reasons[G_GEO_BAD_KEY]            = "Bad Key: The API key is either invalid or does not match the domain for which it was given";
      reasons[G_GEO_TOO_MANY_QUERIES]   = "Too Many Queries: The daily geocoding quota for this site has been exceeded.";
      reasons[G_GEO_SERVER_ERROR]       = "Server error: The geocoding request could not be successfully processed.";
      reasons[G_GEO_BAD_REQUEST]        = "A directions request could not be successfully parsed.";
      reasons[G_GEO_MISSING_QUERY]      = "No query was specified in the input.";
      reasons[G_GEO_UNKNOWN_DIRECTIONS] = "The GDirections object could not compute directions between the points.";

      // === catch Directions errors ===
      GEvent.addListener(gdir, "error", function() {
        var code = gdir.getStatus().code;
        var reason="Code "+code;
        if (reasons[code]) {
          reason = reasons[code]
        } 

        alert("Failed to obtain directions, "+reason);
      });


    // ===== request the directions =====
      function getDirections() {

        // ==== Set up the walk and avoid highways options ====
        var opts = {};
        opts.travelMode = G_TRAVEL_MODE_DRIVING;

        /*if (document.getElementById("walk").checked) {
           opts.travelMode = G_TRAVEL_MODE_WALKING;
        }

        if (document.getElementById("highways").checked) {
           opts.avoidHighways = true;
        }*/

        // ==== set the start and end locations ====
        var saddr = document.getElementById("saddr").value
        var daddr = document.getElementById("daddr").value

        var queryString = "from:"+saddr+" to:"+daddr;

        alert(queryString);

        gdir.load(queryString, opts);

        var distance = gdir.getCopyrightsHtml();
        alert(distance);

      }

And the bit of code that creates the HTML for within the marker window is:

 function createMarker(point, name, address, city, zipPostcode, phone, email, website, i) {
      var marker = new GMarker(point);
      var html = '<b style="font-size:1.2em;">' + name + '</b><br /> <br/> <b>Address: </b>' + address + '<br /> <b>City: </b>' + city + '<br /> <b>Zipcode: </b>' + zipPostcode + '<br /><b>Tel:</b> ' + phone + '<br /><br /><b>Email: </b><a style="color:#000; text-decoration:none; font-weight:bold;" target="_blank" href="' + email + ' title="'+email+'" "> Email dealer</a><br /><br /> <b>URL:</b> <a style="color:#000; text-decoration:none; font-weight:bold;" target="_blank" href="' + website + '" title="'+website+'"> Visit dealer\'s website</a>';


      html = html + '<br /><br />Directions: ' +
           '<br>Start address:<form action="javascript:getDirections()">' +
           '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
           '<INPUT value="Get Directions" TYPE="SUBMIT"><br>' +
           'Walk <input type="checkbox" name="walk" id="walk" /> &nbsp; Avoid Highways <input type="checkbox" name="highways" id="highways" />' +
           '<input type="hidden" id="daddr" value="'+name+"@"+ point.lat() + ',' + point.lng() + 
           '"/>';

      //html = html + "<br /><br /><a target='_blank' style='color:#000;' href='http://maps.google.com/maps?saddr=&daddr="+ point.lat() +","+ point.lng() +"("+address+")' title='Get directions to store'>Get directions to this store</a>";

      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }

Thanks for looking!

Edited 3 Years Ago by Reverend Jim: Fixed formatting

OK this is weird now. On my first attempt I get an error 500 (unknown reason for failure) but the alert after this is able to output the copyright notice and other details OK.

Then on the second attempt I get the code 200 (success) and again am able to alert various details to the browser.

But the map and directions still don't display!

Here is my slightly revised code.

// ===== request the directions =====
      function getDirections() {
		
        // ==== Set up the walk and avoid highways options ====
        var opts = {};
        //opts.travelMode = G_TRAVEL_MODE_DRIVING;
		
		/*if (document.getElementById("walk").checked) {
           opts.travelMode = G_TRAVEL_MODE_WALKING;
        }
				
        if (document.getElementById("highways").checked) {
           opts.avoidHighways = true;
        }*/
		
        // ==== set the start and end locations ====
        var saddr = document.getElementById("saddr").value
        var daddr = document.getElementById("daddr").value
		
		var queryString = "from:"+saddr+" to:"+daddr;
		
		alert(queryString);
		
        gdir.load(queryString, G_TRAVEL_MODE_DRIVING);
		
		var confirmcode = gdir.getStatus().code;
		alert(confirmcode);
		
		var crnotice = gdir.getNumRoutes();
		alert(crnotice);
		
      }

Do I need to add an Event handler? I've looked at that but can't quite get it.

This article has been dead for over six months. Start a new discussion instead.