Adding the search function

The search function requires three actions:
  1. Add the search panel (using the searchPanel tag or a combination of searchButton, searchField and searchResults to the page)
  2. Add search="true" to the map-tag
  3. Add a searchValue to the marker-tags

Screenshot

There are two possible methods to achieve a something like the screenshot above:

searchPanel

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

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

API

Code

<div style="position:absolute; width:20%;">
	<rd:searchPanel id="panel01"/>
</div>
<div style="position:absolute; width:80%;right:2px">
	<rd:map mapId="map_canvas" width="700px" height="500px" key="abcdefg" autoCenter="true"
	search="true">
		<rd:marker id="marker01" name="RealDolmen Huizingen" 
			address="A. Vaucampslaan 42" city="1654 Huizingen" country="Belgium" 
			searchValue="Huizingen">
			<rd:infoWindow for="marker01" text="RealDolmen HQ"/>
		</rd:marker>
		<rd:marker id="marker02" name="White House" 
			address="1600 Pennsylvania Avenue" city="Washington DC" country="USA"
			searchValue="The White House">
			<rd:infoWindow for="marker02" text="The White House"/>
		</rd:marker>
		<rd:mapTypeControl useMenu="true" hybridMap="true"/>
	</rd:map>
</div>

searchButton, searchField and searchResults

With these 3 components, you can create a search panel similar to the searchPanel, but with more customization options.

Attention!
Never put the searchButton within a form! This will lead to a refresh of the page when the search button is pressed.

API

Code

<div>
	<rd:searchField id="searchField" />
	<rd:searchButton id="searchButton" value="Search!" />
	<rd:searchResults id="searchResults" />
</div>
<div style="position:absolute; width:80%;right:2px">
	<rd:map mapId="map_canvas" width="700px" height="500px" key="abcdefg" autoCenter="true"
	search="true">
		<rd:marker id="marker01" name="RealDolmen Huizingen" 
			address="A. Vaucampslaan 42" city="1654 Huizingen" country="Belgium" 
			searchValue="Huizingen">
			<rd:infoWindow for="marker01" text="RealDolmen HQ"/>
		</rd:marker>
		<rd:marker id="marker02" name="White House" 
			address="1600 Pennsylvania Avenue" city="Washington DC" country="USA"
			searchValue="The White House">
			<rd:infoWindow for="marker02" text="The White House"/>
		</rd:marker>
		<rd:mapTypeControl useMenu="true" hybridMap="true"/>
	</rd:map>
</div>