943,923 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > G maps API driving directions not populating map or directions div tag
Ad:
Permalink
Jan 8th, 2009
0

G maps API driving directions not populating map or directions div tag

Expand Post »
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.

[code=JavaScript]

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
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.         } 
  2.  
  3.         alert("Failed to obtain directions, "+reason);
  4.       });
  5.  
  6.  
  7. 	// ===== request the directions =====
  8.       function getDirections() {
  9.  
  10.         // ==== Set up the walk and avoid highways options ====
  11.         var opts = {};
  12.         opts.travelMode = G_TRAVEL_MODE_DRIVING;
  13.  
  14. 		/*if (document.getElementById("walk").checked) {
  15.            opts.travelMode = G_TRAVEL_MODE_WALKING;
  16.         }
  17.  
  18.         if (document.getElementById("highways").checked) {
  19.            opts.avoidHighways = true;
  20.         }*/
  21.  
  22.         // ==== set the start and end locations ====
  23.         var saddr = document.getElementById("saddr").value
  24.         var daddr = document.getElementById("daddr").value
  25.  
  26. 		var queryString = "from:"+saddr+" to:"+daddr;
  27.  
  28. 		alert(queryString);
  29.  
  30.         gdir.load(queryString, opts);
  31.  
  32. 		var distance = gdir.getCopyrightsHtml();
  33. 		alert(distance);
  34.  
  35.       }

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

javascript Syntax (Toggle Plain Text)
  1.  
  2.  function createMarker(point, name, address, city, zipPostcode, phone, email, website, i) {
  3.       var marker = new GMarker(point);
  4.       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>';
  5.  
  6.  
  7. 	  html = html + '<br /><br />Directions: ' +
  8.            '<br>Start address:<form action="javascript:getDirections()">' +
  9.            '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
  10.            '<INPUT value="Get Directions" TYPE="SUBMIT"><br>' +
  11.            'Walk <input type="checkbox" name="walk" id="walk" /> &nbsp; Avoid Highways <input type="checkbox" name="highways" id="highways" />' +
  12.            '<input type="hidden" id="daddr" value="'+name+"@"+ point.lat() + ',' + point.lng() + 
  13.            '"/>';
  14.  
  15. 	  //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>";
  16.  
  17.       GEvent.addListener(marker, 'click', function() {
  18.         marker.openInfoWindowHtml(html);
  19.       });
  20.       return marker;
  21.     }


Thanks for looking!
Last edited by rickya100; Jan 8th, 2009 at 8:05 am. Reason: Trying to fix code tag
Reputation Points: 13
Solved Threads: 1
Junior Poster in Training
rickya100 is offline Offline
78 posts
since Mar 2008
Permalink
Jan 8th, 2009
0

Re: G maps API driving directions not populating map or directions div tag

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.

javascript Syntax (Toggle Plain Text)
  1.  
  2. // ===== request the directions =====
  3.       function getDirections() {
  4.  
  5.         // ==== Set up the walk and avoid highways options ====
  6.         var opts = {};
  7.         //opts.travelMode = G_TRAVEL_MODE_DRIVING;
  8.  
  9. 		/*if (document.getElementById("walk").checked) {
  10.            opts.travelMode = G_TRAVEL_MODE_WALKING;
  11.         }
  12.  
  13.         if (document.getElementById("highways").checked) {
  14.            opts.avoidHighways = true;
  15.         }*/
  16.  
  17.         // ==== set the start and end locations ====
  18.         var saddr = document.getElementById("saddr").value
  19.         var daddr = document.getElementById("daddr").value
  20.  
  21. 		var queryString = "from:"+saddr+" to:"+daddr;
  22.  
  23. 		alert(queryString);
  24.  
  25.         gdir.load(queryString, G_TRAVEL_MODE_DRIVING);
  26.  
  27. 		var confirmcode = gdir.getStatus().code;
  28. 		alert(confirmcode);
  29.  
  30. 		var crnotice = gdir.getNumRoutes();
  31. 		alert(crnotice);
  32.  
  33.       }

Do I need to add an Event handler? I've looked at that but can't quite get it.
Reputation Points: 13
Solved Threads: 1
Junior Poster in Training
rickya100 is offline Offline
78 posts
since Mar 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Javascript Chat
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: javascript gridview





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC