Example 22 - Labels

With the addition of the <googlemaps:label> tag you can now add labels to your maps. Labels move with your map and are located using a <googlemaps:point> tag. You can use labels in place of markers (for noting relevant places), you can place them over a marker (in place of an infowindow) or use them as an image that moves with your map. The choice is up to you.

In this example, I've simply used the homepage map (removing the lines) and added some labels in addition to the markers.

Here's the code we used:

<googlemaps:map id="map" width="780" height="300" version="2" type="STREET">
  	<googlemaps:key domain="www.lamatek.com" key="Axxxxx"/>
  	<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:marker>
	<googlemaps:label point="point1" opacity=".75" 
		style="background: #000; color: #fff; white-space: nowrap; border: 1px dashed #000;"
		x_offset="-30" y_offset="-40">
		My House
	</googlemaps:label>
	<googlemaps:label point="point2" opacity=".75" 
		style="background: #000; color: #fff; white-space: nowrap; border: 1px dashed #000;"
		x_offset="-30" y_offset="-40">
		My Work
	</googlemaps:label>
	<googlemaps:panControl enable="true"/>
	<googlemaps:typeControl enable="true"/>
	<googlemaps:zoomControl enable="true" size="large"/>
	<googlemaps:scaleControl enable="true"/>
</googlemaps:map>
  

Labels only work with version 2 maps.

Our next example displays the new draggable marker feature.