Example 20 - WMS Layers

With the addition of the <googlemaps:wms> tag, developers can now add WMS layers to their Google Maps. You now can have access to hundreds of free map images for all types of wonderful overlays. The current version works with version 1 maps or version 2 maps, but the showOverlay option only works in version 1 maps..

To use the wms tag, you will need to download the wms1.js or wms2.js script (depending on your desired map version) and place it in your website. Remember where you've placed it as you'll need to reference it in the <googlemaps:wms> tag.

The version 1 script is based on code written by Brian Flood, and the version 2 script is based upon code written by John Deck. It's important that you use the script files from this site as they have been modified to fit some additional requirements. The original scripts will not work with the Google Maps JSP Taglibrary.

Simply add a <googlemaps:wms> tag to your file, provide the wms server attributes and point to the appropriate script, and you're off and running.

In this example map we've added a single WMS layer that you can view when you click the WMS map type button. There's also a large list of WMS servers you can access. Plus I'm sure there's many, many more.

Here's the code we used:

<googlemaps:map id="map" width="780" height="300" version="2" type="STREET" zoom="8">
  	<googlemaps:key domain="localhost" key="xxxxx"/>
  	<googlemaps:point id="point1" longitude="-76.67" latitude="39.18"/>
	<googlemaps:wms id="wms1" name="WMS" 
		url="http://wms.telascience.org/cgi-bin/ngBM_wms"
		layers="ngBM" format="image/jpeg" showOnStartup="true" 
		pathToScript="/GoogleMaps/wms1.js" showOverlay="true"/> 
	<googlemaps:typeControl enable="true"/>
	<googlemaps:panControl enable="true"/>
  	<googlemaps:zoomControl enable="true" size="large"/>
</googlemaps:map>
  

It may take some tweaking to get it just right, but you'll soon get the hang of it...

Our next example shows the new debugger window feature.