[GIS] How to add Google Maps layer as additional layer (OpenLayers, OSM)

geoservergoogle mapsopenlayers-2openstreetmapwms

I am total newbie when it comes to GeoServer, JavaScript etc. I have managed to get my map working and the layers from my localhost are showing on the map. Base layer is OSM but I would like to add extra option in my layer list so that user can choose between OSM and Google Maps.

I've been searching far and wide for past few days but so far I have been able to implement any of the solutions I have found. Is it even possible to add Google Maps in my case?

Bare in mind that I am beginner 🙂

This is the working code I use at the moment:

<html>
<head>
<title>OpenStreetMaps and GeoServer</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type='text/javascript' src='http://www.openlayers.org/api/OpenLayers.js'>      </script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="ol.css" type="text/css">
</head>
<body>
<div id="map" class="smallmap"></div>
    <script>
    //Defining projections
        var geographic = new OpenLayers.Projection("EPSG:4326");
        var mercator = new OpenLayers.Projection("EPSG:900913");

    //Defining bounds    
        var world = new OpenLayers.Bounds(-180, -89, 180, 89).transform(
            geographic, mercator
        );
    //Defining map center    
        var lund_center = new OpenLayers.LonLat(13.19, 55.71).transform(
            geographic, mercator
        );

        var options = {
            projection: mercator,
            displayProjection: geographic,
            units: "m",
            maxExtent: world,
            maxResolution: 156543.0399,

        };
    //Defining main variables  
        var map = new OpenLayers.Map("map", options, { controls: [] });
        var osm = new OpenLayers.Layer.OSM();
        map.addLayer(osm);

    //List of layers 
        var lund = new OpenLayers.Layer.WMS(
            "City neighborhoods",
            "http://localhost:8080/geoserver/wms?",
            {layers: "lu:city_neighborhood", 
            transparent: true}
        );
        map.addLayer(lund);
        ///////////////////////////////////////
        var roads_wms = new OpenLayers.Layer.WMS(
            "Roads",
            "http://localhost:8080/geoserver/wms",
            {
                layers: "lu:roads",
                transparent: "true",
                format: "image/png"
            },
            {isBaseLayer: false, visibility: true}
        );
        map.addLayer(roads_wms);
        ///////////////////////////////////////
        var railroads_wms = new OpenLayers.Layer.WMS(
            "Railroads",
            "http://localhost:8080/geoserver/wms",
            {
                layers: "lu:railroads",
                transparent: "true",
                format: "image/png"
            },
            {isBaseLayer: false, visibility: true}
        );
        map.addLayer(railroads_wms);
        /////////////////////////////////////// 
        var highways_wms = new OpenLayers.Layer.WMS(
            "Highway",
            "http://localhost:8080/geoserver/wms",
            {
                layers: "lu:highways",
                transparent: "true",
                format: "image/png"
            },
            {isBaseLayer: false, visibility: true}
        );
        map.addLayer(highways_wms);
        ///////////////////////////////////////
        var address_wms = new OpenLayers.Layer.WMS(
            "Household addresses",
            "http://localhost:8080/geoserver/wms",
            {
                layers: "lu:address",
                transparent: "true",
                format: "image/png"
            },
            {isBaseLayer: false, visibility: true}
        ); 
        map.addLayer(address_wms);
        ///////////////////////////////////////
        var build_wms = new OpenLayers.Layer.WMS(
            "Buildings",
            "http://localhost:8080/geoserver/wms",
            {
                layers: "lu:buildings",
                transparent: "true",
                format: "image/png"
            },
            {isBaseLayer: false, visibility: true, opacity: 0.8}
        );
        map.addLayer(build_wms);
        ///////////////////////////////////////

    //Map center and zoom
        map.setCenter(lund_center, 14);

    //List of controls    
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.addControl(new OpenLayers.Control.KeyboardDefaults());          
        map.addControl(new new OpenLayers.Control.Navigation());

    //Coordinates of mouse position
        map.addControl(new OpenLayers.Control.MousePosition());
    </script>
</body>
</html>

current_map

Best Answer

Sure you can. Its as easy as loading the map. See this example:

http://dev.openlayers.org/examples/osm-google.html

Code: (Place this after the OpenLayers map)

var gmap = new OpenLayers.Layer.Google("Google Streets");
    map.addLayer(gmap);

and load the folowing javascript: 

<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
Related Question