Google maps layer as the base layer and WMS as overlays shows empty map

Question

I have a problem of showing my base layer which is Google Maps. The browser console reports

"Uncaught TypeError: undefined is not a function" in var google_streets = new OpenLayers.Layer.Google( "Google Streets", {numZoomLevels: 20} );.

This is my code:

        var map;
        var untiled;
        var tiled;
        var pureCoverage = false;
        var format;

        var googleMercator = new OpenLayers.Projection("EPSG:4269");
        var baseProjection = new OpenLayers.Projection("EPSG:4326");

        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;

        OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

        function init(){

            format = 'image/png';
            if(pureCoverage) {
                document.getElementById('filterType').disabled = true;
                document.getElementById('filter').disabled = true;
                document.getElementById('antialiasSelector').disabled = true;
                document.getElementById('updateFilterButton').disabled = true;
                document.getElementById('resetFilterButton').disabled = true;
                document.getElementById('jpeg').selected = true;
                format = "image/jpeg";
            }

            var bounds = new OpenLayers.Bounds(
                -179.147340000341, -14.37879999982,
                179.778480000052, 83.1480859363171
            );
            var options = {
                controls: [],
                maxExtent: bounds,
                maxResolution: 1.4020539843765352,
                projection: googleMercator,
        displayProjection: baseProjection,
                units: 'degrees'
            };
            map = new OpenLayers.Map('map', options);

            // setup tiled layer
            tiled = new OpenLayers.Layer.WMS(
                "US_Canada:northus - Tiled", "http://localhost:8080/geoserver/US_Canada/wms",
                {
                    LAYERS: 'US_Canada:northus',
                    STYLES: '',
                    format: format,
                    tiled: true,
                    transparent: true,
                    tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
                },
                {
                    buffer: 0,
                    displayOutsideMaxExtent: true,
                    isBaseLayer: false,
                    yx : {'EPSG:4269' : true}
                } 
            );

            // setup single tiled layer
            untiled = new OpenLayers.Layer.WMS(
                "US_Canada:northus - Untiled", "http://localhost:8080/geoserver/US_Canada/wms",
                {
                    LAYERS: 'US_Canada:northus',
                    STYLES: '',
                    format: format,
                    transparent: true
                },
                {
                   singleTile: true, 
                   ratio: 1, 
                   isBaseLayer: false,
                   yx : {'EPSG:4269' : true}
                } 
            );
            var google_streets = new OpenLayers.Layer.Google(
                "Google Streets",  {numZoomLevels: 20}
            );

            map.addLayers([ google_streets, untiled, tiled]);

            map.addControl(new OpenLayers.Control.PanZoomBar({
                position: new OpenLayers.Pixel(2, 15)
            }));
            map.addControl(new OpenLayers.Control.Navigation());
            map.addControl(new OpenLayers.Control.Scale($('scale')));
            map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
}

Answer 1

You are facing this issue, because you are using the OpenLayers Library that comes with Geoserver.

This Library is an 'lite' version of the OpenLayers Library, and should not be used for Custom Applications. It has only those classes which are required by Geoserver's preview function. It does not have the additional classes like those required for the various Google Layers.

You need to download the full OpenLayers Library from the OpenLayers Website, and use that in your application.