JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

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

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Mar 2008
Posts: 78
Reputation: rickya100 is an unknown quantity at this point 
Solved Threads: 1
rickya100 rickya100 is offline Offline
Junior Poster in Training

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

 
0
  #1
Jan 8th, 2009
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2008
Posts: 78
Reputation: rickya100 is an unknown quantity at this point 
Solved Threads: 1
rickya100 rickya100 is offline Offline
Junior Poster in Training

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

 
0
  #2
Jan 8th, 2009
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.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxhelp animate array automatically beta box browser bug calendar captchaformproblem cart checkbox child close codes column createrange() css cursor decimal dependent design disablefirebug dom download dropdown editor element engine enter error events explorer ext file firefox focus forms frameworks google gwt gxt highlightedword html htmlform ie8 iframe images index internet java javascript jawascriptruntimeerror jquery jsf jsfile jsp jump listbox masterpage math menu microsoft mimic mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent pdf php player post problem progressbar prototype redirect regex runtime scale scroll search select shopping size sql text textarea w3c web website window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC