I want to have my directions page having the same functionality as this page i.e. the Google Map object is updated from the form on the right. How can I have this in my pages? I'm using Django BTW, but I don't think this will matter much...implementation should be universal for something like this.
A:
I've done this within a Drupal Site. The code API is pretty straight forward. You can generate the initial interactive map using your longitude and latitide as the center point.
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
Then you need to have your directions form make a call to the Google Geocoder. This will turn the address entered into longitude and lattitude - although you maybe able to bypass this step.
Then, use the newly acquired Long & Lat to generate a directions request (Google API, again).
// Create a directions object and register a map and DIV to hold the
// resulting computed directions
var map;
var directionsPanel;
var directions;
function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(42.351505,-71.094455), 15);
directionsPanel = document.getElementById("route");
directions = new GDirections(map, directionsPanel);
directions.load("from: 500 Memorial Drive, Cambridge, MA to: 4 Yawkey Way, Boston, MA 02215 (Fenway Park)");
}
All of the Javascript can go directly in your HTML. I suggest you take some time to study http://code.google.com/apis/ajax/playground/
cinqoTimo
2010-02-16 17:32:32