Welcome to GoogleMaps JSP Taglibrary!

Example 5

Alright, two locations now. We used a <googlemaps:icon> tag to specify a custom icon for the second marker. As you can see you need to specify an icon image as well as a shadow image. The images we used are here:

I'm no graphic artist, but you get the idea...

We also added a pretty blue line that connects the two markers. You may have noticed that the map automatically centered itself around both points so the center of the map is exactly the center of the two points. As you add more points, the map will continue to center around them unless you override this behaviour by defining a specific centerLatitude and centerLongitude value.

Here's the code we used (changes & additions are highlighted):

<googlemaps:map id="map" width="250" height="300" version="1" type="STREET" 
		zoom="8">
  	<googlemaps:key domain="localhost" key="xxxx"/>
  	<googlemaps:point id="point1" address="74 Connors Lane" city="Elkton" 
  			state="MD" zipcode="21921" country="US"/>
  	<googlemaps:point id="point2" address="1226 Forest Parkway" 
  			city="West Deptford" state="NJ" zipcode="08066" country="US"/>
	<googlemaps:marker id="marker1" point="point1">
		<googlemaps:infowindow display="false">
		74 Connor Lane<br/>Elkton, MD
		</googlemaps:infowindow>
	</googlemaps:marker>
	<googlemaps:marker id="marker2" point="point2">
		<googlemaps:infowindow display="false">
		1226 Forest Parkway<br/>West Deptford, NJ
		</googlemaps:infowindow>
		<googlemaps:icon icon="/GoogleMaps/images/g.png" 
			shadow="/GoogleMaps/images/g_shadow.png"
			anchorX="23" anchorY="48" iconWidth="48" iconHeight="48" 
			shadowWidth="64" shadowHeight="48"
			infoWindowAnchorX="23" infoWindowAnchorY="1"/>
	</googlemaps:marker>
	<googlemaps:circle id="circle1" point="point1" radius="10" color="#ff0000" 
			weight="3"/>
	<googlemaps:polyline id="line1" pointlist="point1, point2" color="#0000ff" 
			weight="5"/>
	<googlemaps:panControl enable="true"/>
	<googlemaps:typeControl enable="true"/>
	<googlemaps:zoomControl enable="true" size="large"/>
	<googlemaps:wheelControl enable="true"/>
	<googlemaps:scaleControl enable="true"/>
</googlemaps:map>

Next, just to get most of the layer tools out of the way, we'll add a box and another circle. In example 6, we'll put a 25 mile radius circle around the second marker and draw a box to surround them.