topp:state with google map layer problem on openlayers

Question

I am trying to create a simple openlayers + geoserver map project. And I have a simple code, as following. When I run the project, it works perfectly. But once I zoom in on the map, states wms layer disappears and I can see only Google maps layer. I also added some pictures for reference. Can someone please help?

 
 
Creating a simple map 
 
 
 
 
html, body { 
width: 100%; 
height: 100%; 
margin: 0; 
padding: 0; 
} 

.olLayerGooglePoweredBy.olLayerGoogleV3.gmnoprint {
visibility:hidden;
}
 
 


    function init() {

        var map = new OpenLayers.Map("rcp1_map");

        var wms = new OpenLayers.Layer.Google("Google Streets", {
            numZoomLevels: 20
        }, { isBaseLayer: true });

        var state = new OpenLayers.Layer.WMS("States WMS", "http://localhost:8080/geoserver/wms",
                { layers: "topp:states", format: "image/png", transparent: true },
        {
            isBaseLayer: false
        });

        map.addLayers([wms, state]);

        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.setCenter(new OpenLayers.LonLat(0, 0), 1);
    }