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