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')}));

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.