Overlaying wms data using google maps v3 api

WMS is a standard protocol used to request mapping data from an OGC compliant map server - two common open source implementations include mapserver and geoserver.

WMS renders the tiles server side and simply sends back an image that meets the specification of the client request (eg. bounding box, styling etc).

The image can comprise of point and vector data (which may be stored in a postgis database, or raster data (imagery) such as geotiff.

The Google maps API does not support WMS directly, however it does support various ways of overlaying images on top of the map.

I came across the following extension that allows you to overlay custom WMS layers and basemap tiles on top of a standard google map.

http://lyceum.massgis.state.ma.us/wiki/doku.php?id=googlemapsv3:home

Here is a sample page (I refactored the code a little bit):

http://blog.canberraphotography.com.au/googlewms/

Note that the guts of the code is in: http://blog.canberraphotography.com.au/googlewms/map.js http://blog.canberraphotography.com.au/googlewms/wms.js

You can easily add a WMS overlay by calling the loadWMS(map, baseURL, customParams) function, where:

map - is an instance of Google.maps.Map baseURL - is the base URL of your WMS server (eg geoserver) customParams - Additional WMS parameters

var myLatlng = new google.maps.LatLng(-27, 133);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

var customParams = [
"FORMAT=image/png8",
"LAYERS=ALA:ibra7_regions"
];

loadWMS(map, "http://spatial.ala.org.au/geoserver/wms?", customParams);

The WMS overlay is the Interim Biogeographic Regionalisation of Australia (IBRA) data set, hosted on my work geoserver instance. More information about this data set can be found here.