How to use the different parts for the routeplanner

There are a few possibilities on how to include a routeplanner in your page. First of all a short overview of the different parts.

Screenshot

Code

The code needed to create the page on this screenshot:

<div>
	<rd:departurePanel id="depPanel" title="departurePanel" />
	<rd:destinationPanel id="destPanel" title="destinationPanel" />
	<rd:calculateButton id="calcButton" value="calculateButton" />
	<rd:resetMapButton id="resetMapBtn" value="resetMapButton" /><br /><br />
	<rd:printFriendlyLink id="prFrLink" value="printFriendlyLink" />
</div>
<rd:directionsOutputPanel id="directionsOutput" />

This option has the highest customization level. You can position each panel where you like it to be.

For users who don't need this, we created also a directionsInputPanel and a directionsPanel. Please read on for more information about these two panels.

directionsInputPanel

This panel includes the departurePanel, the destinationPanel, the calculateButton and the resetMapButton.

To achieve a result similar to the screenshot above, please use:

<div>
	<rd:directionsInputPanel id="directionsInputPnl" />
	<br /><br />
	<rd:printFriendlyLink id="prFrLink" value="printFriendlyLink" />
</div>
<rd:directionsOutputPanel id="directionsOutput" />

There is one more possibility to use:

directionsPanel

This panel is the easiest to use, but isn't customizable (except for css styling). This combines the directionsInputPanel, the printFriendlyLink and the directionsOutputPanel.

<rd:directionsPanel id="dirPanel" />