So far in this series, I've covered retrieving your latitude and longitude with JavaScript, recording a track while changing locations and reverse geocoding your position. One additional key component for any mapping utility is finding directions between two points.Now that we have a position determined, we can find directions to another position. This script uses components from the Google Maps JavaScript API, please read this thing. For simplicity sake and to reduce server load I have created a static list of positions that can be routed to. Adding a text input instead should be reasonable if you've made it this far. The location finder has been modified slighty to remove the event driven button. Instead now the address is automatically updated and the user is presented with a list of positions they can route to.
So the HTML portion of the script is as follows:
Latitude: <div id="lat"> </div><br />
Longitude: <div id="lng"> </div><br />
*** Get Directions *** <br /><br />
From: <div id="from"> </div> <br />
To:
<br /><form><select id="to">
<option></option>
<option>Times Square, NYC</option>
<option>Griffith Observatory, Los Angeles, CA</option>
...
</select>
</form>
<div id="directions"> </div>
Converting that select box to an entry field would require minimal effort. To handle the change event of the select box and update the current address location automatically, I added the following function which is called on each position change.
function displayMap(location) {
var lat = ...
var addy = document.getElementById('from');
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode( { 'latLng': latlng},
function(results, status) {
if (status == "OK" && results.length > 0) {
addy.innerHTML = results[0].formatted_address;
} else {
addy.innerHTML = status;
}
}
);
var destination = document.getElementById("to");
destination.addEventListener("change",function() { getDirections(
addy.innerHTML, destination.value) },false);
}
If you look closely at the event listener for the "to" select box, you'll see it calls the getDirections function and pushes the innerHTML of the address div and the value of the destination selection as parameters. This may not work in all browsers.
the getDirections function uses the Google objects to retrieve the directions. The directions are updated using three key components.- Create the directionsDisplay object
- Attach a div on the page to the setPanel method. In this case we'll be using the "directions" div.
- Use diresctionsDisplay.setDirections of our response to post Google formatted directions.
function getDirections(from, to)
{
var dirs = document.getElementById("directions");
directionsService = new google.maps.DirectionsService();
var request = {
origin: from,
destination: to,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setPanel(dirs);
directionsService.route(request,
function(response, status) {
if (status == "OK") {
directionsDisplay.setDirections(response);
} else {
dirs.innerHTML += status;
}
}
);
}
And...that about sums up this episode. I have a demo of this short web app online. Any questions...please post in the comments.
0 comments:
Post a Comment