[OpenLayers-Users] Overlaying WMS layers on Google Maps

Wed May 11 05:34:46 EDT 2011

Dear all,

I'm trying to overlay data on a map with the spherical mercator
projection and Google Maps as base layer. I've managed to overlay WFS
layers, but with WMS I haven't succeeded so far. I'm using a setup the
most similar possible to that I used to over WFS data, but the WMS
layers do not even show up.

Below goes the code I'm using to overlay the sample Tasmania state
boundaries WMS from Geoserver. Any help appreciated.

Thank you,

Luís

---

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
	<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;" />
	<meta name="apple-mobile-web-app-capable" content="yes" />

	<style type="text/css">
            #map {
                width: 560px;
                height: 460px;
                border: 1px solid black;
            }
        </style>

	<script src="http://localhost:8090/geoserver/www/OpenLayers-2.10/OpenLayers.js"
type="text/javascript"></script>

	<!-- Google API-->
	<script src="http://maps.google.com/maps/api/js?v=3.2&amp;sensor=false"></script>

	<!-- Proj4js -->
	<script src="http://localhost:8090/geoserver/www/proj4js-1.0.1/lib/proj4js.js"
type="text/javascript"></script>

        <script defer="defer" type="text/javascript">

	Proj4js.defs["GOOGLE"] = "+proj=merc +a=6378137 +b=6378137
+lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null
+no_defs";
	Proj4js.defs["EPSG:4326"] = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";

	var sphericalMercator = new OpenLayers.Projection("GOOGLE");
	var wgs84 = new OpenLayers.Projection("EPSG:4326");

	var map, tasBounds;

	function init() {

	    var extent = new OpenLayers.Bounds(
		-11593508, 5509847, -11505759, 5557774
	    );

	    var options = {
               projection: sphericalMercator,
               displayProjection: wgs84,
               units: "m",
               maxResolution: 78271.51695,
               maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
                                                20037508, 20037508),
	       restrictedExtent: extent,
            };

	    map = new OpenLayers.Map('map');
	    map.addControl(new OpenLayers.Control.LayerSwitcher());

	    var gphy = new OpenLayers.Layer.Google(
		"Google Physical",
		{type: google.maps.MapTypeId.TERRAIN}
	    );

	    tasBounds  = new OpenLayers.Layer.WMS(
		"tasmania_state_boundaries",
		"http://localhost:8090/geoserver/wms",
		{
		    layers: 'topp:tasmania_state_boundaries',
		    transparent: true,
		    srs: 'EPSG:900913',
		    format: 'image/png'
		},
		{
		    isBaseLayer: false,
		    visibility: true
		}
	    );

	    map.addLayers([gphy, tasBounds]);

	    map.setCenter(new OpenLayers.LonLat(147, -42).transform(
		wgs84, sphericalMercator), 5);
	}
        </script>	
    </head>
    <body onload="init()">
        <h5>This is a test with Google Maps v3.</h5>
        <div id="map" class="smallmap"></div>
    </body>
</html>