Embedded google maps map in directions page

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 univ开发者_Go百科ersal for something like this.

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/