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" /> 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!