Adding routeplanner functionality

The search function requires two actions:
  1. Add the directions panel to the page (for more customization options, please visit this tutorial)
  2. Add showDirections="true" to the map-tag

This option will add two links to all markers infowindows, a 'From here' link, and a 'To here' link. This way users can easily specify the departure and the destination.

The directions panel has absolutely no layout. You can add layout with the style attribute of the tag (see API). Positioning the directions panel is best done with the use of div's (see below). You can also add the directions panel to a component of RichFaces, for example. The directions panel will inherit the layout of the component.

Attention!
Never put the directions panel within a form! This will lead to a refresh of the page when the 'Calculate' button is pressed.

API

Screenshots

Code

<div id="container" style="left: 0px; top: 0px; bottom: 0px; right:0px; height:100%; width:100%;">
	<div style="position: absolute; height:100%; width: 30%; overflow: auto;">
		<rd:directionsPanel id="panel01" />
	</div>
	<div style="position: absolute; width: 69%; right: 2px">
		<rd:map mapId="map_canvas" width="700px" height="500px" key="abcdefg" autoCenter="true" showDirections="true">
			<rd:marker id="M1" address="A. Vaucampslaan 42" city="1654 Huizingen"
				country="Belgium" name="RealDolmen HQ">
				<rd:infoWindow text="RealDolmen HQ" for="M1" />
			</rd:marker>
			<rd:marker id="M2" address="Prins Boudewijnlaan 26"
				city="2550 Kontich" country="Belgium" name="Office Kontich Boudewijnlaan">
				<rd:infoWindow text="Office Kontich Boudewijnlaan" for="M2" />
			</rd:marker>
		</rd:map>
	</div>
</div>