Google Maps API Tutorial

© 2007, 2008, 2009 Mike Williams

Translate this page:


Custom direction details

GDirections.load() doesn't give you much control over the layout of the directions information. If you want to have the directions displayed slightly differently, you have to read through the GRoutes and GSteps and build up the whole thing yourself.

Here's a page where I've already done that to produce a display that looks almost exactly like that produced by GDirections, but since it's all done in exposed Javascript, you can take a copy and customise the code to make it look the way that you want it to.

The parameters of my "customPanel()" function are:

  1. The map object.
  2. A string containing the name of the global variable that points to your map.
  3. The GDirections() object.
  4. The div into which the directions are to be placed.

Potential Pitfalls

  1. Don't forget to use {getSteps:true} otherwise there won't be any GRoute or GStep information to process
  2. The GDirections "load" event seems to happen just before it centres the map. If you are relying on GDirections to perform the initial centering of the map, then you have to set a short timeout after the "load" before the direction details are processed.
Back to Mike's Homepage
Up to the start of this tutorial