[GIS] I cannot override the WMS layer in Google Maps as a base

geoservergoogle-maps-apiopenlayers-2overlay

I can not override my WMS layer in Google Maps as a base:
I have a WMS layer in Geoserver am using Openlayers to show them.

Calling only works WMS layer:

Wms layer

Here is my code, I am using using the bounds used in Geoserver bounds because they use the standard EPSG 900913 does not work:

<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='utf-8' />
 <title>My OpenLayers Map</title>
 <script type='text/javascript' src='OpenLayers.js'></script>
 <script type='text/javascript'>

 var map;

 function init() { 

var bounds = new OpenLayers.Bounds(
     -51.2809205216329, -30.2445876337061,
                -51.0207995216329, -29.9661286337061
    );

var options = {
    controls :[new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.PanZoom()],

    maxExtent : bounds,
    maxResolutin:0.00108773046875,
    projection: "EPSG:900913",
    units: 'm'
};

map = new OpenLayers.Map('map_element', options);    



var wms = new OpenLayers.Layer.WMS(
            "Linhas de ônibus",
            "http://localhost:8080/geoserver/wms?",
            {
               layers: 'Teste:onibus',                                
               isBaseLayer: false,
               styles : '', 
               format :"image/jpeg"
            }            
        );

    map.addLayers([wms]);

    var point = new OpenLayers.LonLat(-51.22,-30.08); 
    point.transform(new OpenLayers.Projection("EPSG:4326"), 
    map.getProjectionObject()); 
    map.setCenter(point, 3); 

    map.addControl(new OpenLayers.Control.LayerSwitcher({}));

 if(!map.getCenter()){
    map.zoomToMaxExtent();
 }
}

 </script>
</head>

<body onload='init();'> <!-- Chama a função js init() --> 

<!--Elemento HTML onde o mapa é exibido -->
 <div id='map_element' style='width: 800px; height: 800px;'>
 </div>

</body>
</html>

The problem is when I try to show the WMS layer on Google Maps API, even though the two baselayers do overlay, whenever I click one layer the other disappears.

Google streets layer

enter image description here

WMS layer blank

enter image description here

My code:

      <!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='utf-8' />
 <title>My OpenLayers Map</title>
 <script type='text/javascript' src='OpenLayers.js'></script>

 <script src="http://maps.google.com/maps/api/js?sensor=false&v=3.2"></script>

 <script type='text/javascript'>


 var map;
  //Bounds: providos do Geoserver
 var bounds = new OpenLayers.Bounds(
         -51.2809205216329, -30.2445876337061,
                    -51.0207995216329, -29.9661286337061
        );

 var options = {
        controls :[new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoom()],
        maxExtent : bounds,
        maxResolutin:0.00108773046875,
        projection: 'EPSG:900913',
        units: 'm'
    };

 function init() {

  map = new OpenLayers.Map('map_element',options);


 var google_streets = new OpenLayers.Layer.Google(
    "Ruas",
    {numZoomLevels: 20}
    );

  var wms = new OpenLayers.Layer.WMS(
                "Linhas de ônibus",
                "http://localhost:8080/geoserver/wms?",
                {
                   layers: 'Teste:onibus',                                
                   isBaseLayer: false,
                   styles : '', 
                   format :"image/png",
                   transparent: true
                }            
            );

//Adiciona as camadas ao mapa
map.addLayers([google_streets, wms]);


var point = new OpenLayers.LonLat(-51.22,-30.08); 
point.transform(new OpenLayers.Projection("EPSG:4326"), 
    map.getProjectionObject()); 
map.setCenter(point, 10); 
 //Camada de controle que vai mostrar as camadas no mapa
 map.addControl(new OpenLayers.Control.LayerSwitcher({}));

 //Verifica se o mapa tem um ponto central e o extende a sua extensão máxima
 if(!map.getCenter()){
 map.zoomToMaxExtent();

 }
 }

 </script>
</head>

<body onload='init();'> <!-- Chama a função js init() --> 

<!--Elemento HTML onde o mapa é exibido -->
 <div id='map_element' style='width: 800px; height: 800px;'>
 </div>

</body>
</html>

Best Answer

I don't think this is the cause of your problem, but you are misspelling maxResolution in your code.

It might help you to use a tool like Fiddler or FireBug to look at the request urls of the WMS layer. For a start, check that the coordinates getting passed are in the correct projection.

Related Question