8

In openlayers-2, we can add google basemaps(satellite,physical,hybrid,etc.). I need to add google basemaps in openlayer-3. How can I add google basemaps???

CODE in openlayers-3

map = new ol.Map({
      layers: [
         new ol.layer.Group({
            layers: [
               new ol.layer.Tile({
                  source: null,
                  visible:false
                  }),
                  new ol.layer.Tile({
                  source: new ol.source.MapQuest({layer: 'sat'})
                  }),
                  new ol.layer.Tile({
                  source: new ol.source.OSM(),
                  visible:false
                    })
                 ]})
                ],
                target: 'map',
                view: new ol.View({
                    center:[28.566667, 4.01666699999998],
                    zoom:7
                    }),
                controls: ol.control.defaults({

                       attribution:false

                }).extend([
                    scaleLineControl
                ]),
            });

        lyr=new ol.layer.Tile({  source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/wms',
            params: {'LAYERS': 'test:test', 'TILED': true},
            serverType: 'geoserver'
            })
        });
map.addLayer(lyr);

I need to google basemaps instead of osm and mapquest.

1

6 Answers 6

4

Google Maps is officially not supported by ol3, see https://gist.github.com/elemoine/e82c7dd4b1d0ef45a9a4

3

it's totally possible to do this, even though it's not supported.

here's an example of integrating google maps with openlayers 3.

be aware: the level of detail available in Google Maps website doesn't correspond to the level of detail available through their Google Maps API. they seem to be using some extra google earth details in their customer facing maps.

1
3

This is a posible solution like OGC:WMS but using Google static API:

var gridSize=512;

getMaxExtent:function(srs){
    var proj= srs? srs : this.getMainProjection();
    var geoExtent= [-180, -85, 180, 85];

    return this.transformExtent(geoExtent, 'EPSG:4326', proj);
},

transform:function(coordinate, srsOrig, srsDest){
    var projOrig= srsOrig? srsOrig : 'EPSG:4326';
    var projDest= srsDest? srsDest : this.getMainProjection();

    return ol.proj.transform(coordinate, projOrig, projDest);
},

getResolutions:function(srs){
    var proj= srs? srs : typterra.serviceHandler.getApplicationTools('ProjectionTools').getMainProjection();
    var defaultTileGrid= ol.proj.get(proj).getDefaultTileGrid();

    if(defaultTileGrid) return defaultTileGrid.getResolutions();
    else return ol.tilegrid.createForProjection(proj).getResolutions();
},


var layer= new ol.layer.Tile({

    source: new ol.source.TileImage({
        attributions:[
            new ol.Attribution({html:'© Google'}),
            new ol.Attribution({html:'Terms of Use.'})
        ];

        tileGrid: new ol.tilegrid.TileGrid({
            extent:getMaxExtent(),
            resolutions:getResolutions(),
            tileSize:[gridSize, gridSize]
        }),

        tileUrlFunction:function(tileCoord, pixelRatio, projection){
            var zoom= tileCoord[0];
            var tileGrid = this.getTileGrid();
            var center=tileGrid.getTileCoordCenter(tileCoord);
            var lat,long;

            center= transform(center, projection, 'EPSG:4326');
            long= new Number(center[0]).toFixed(6);
            lat= new Number(center[1]).toFixed(6);


            return 'http://maps.googleapis.com/maps/api/staticmap?'+
                    'key=yourApiKeyHere&'+
                    'maptype='+model.get('name')+'&'+
                    'size='+gridSize+'x'+gridSize+'&'+
                    'zoom='+zoom+'&'+
                    'center='+lat+','+long
            ;
        }
    })
});
2

I am using the Google Map Static Map API with OpenLayers v3.17.1 in coordinate system WGS84.PseudoMercator EPSG:3857.

Here is my code looks like:

var gridSize=512;
//Google Terrain
            var gterrain = new ol.layer.Tile({
                preload: Infinity,
                source: new ol.source.TileImage({
                    attributions: [
                      new ol.Attribution({
                          html: '<a href="https://www.google.com/intl/en-GB_US/help/terms_maps.html">Google Map</a>'
                      }),
                      ol.source.OSM.ATTRIBUTION
                    ],
                    tileGrid: new ol.tilegrid.TileGrid({
                        extent:[
                              -13860793.173271,
                              6329131.950797,
                              -13845619.906785,
                              6337107.916410
                        ],
                        resolutions:[156543.03390625, 78271.516953125, 39135.7584765625,
                                  19567.87923828125, 9783.939619140625, 4891.9698095703125,
                                  2445.9849047851562, 1222.9924523925781, 611.4962261962891,
                                  305.74811309814453, 152.87405654907226, 76.43702827453613,
                                  38.218514137268066, 19.109257068634033, 9.554628534317017,
                                  4.777314267158508, 2.388657133579254, 1.194328566789627,
                                  0.5971642833948135, 0.2986, 0.1493],
                        tileSize:[gridSize, gridSize]
                    }),
                    tileUrlFunction:function(tileCoord, pixelRatio, projection){
                        var zoom = tileCoord[0];
                        var tileGrid = this.getTileGrid();
                        var center = ol.proj.transform(ol.extent.getCenter(tileGrid.getTileCoordExtent(tileCoord)),"EPSG:3857", "EPSG:4326");
                        //console.log(center[0]);
                        //console.log(center[1]);
                        return 'http://maps.googleapis.com/maps/api/staticmap?'+
                'key=YOUR_KEY&'+
                'maptype=terrain&'+
                'size='+gridSize+'x'+gridSize+'&'+
                'zoom='+zoom+'&'+
                'center='+center[1]+','+center[0]
                        ;
                    },
                    maxZoom: 21
                }),
                visible: false,
                name: 'Google Terrain'
            });
1

Please use ol3-google-maps library for integrating Google Maps in Openlayers3 Site URL:http://mapgears.github.io/ol3-google-maps/

Below is the sample code. More details please refer the above mentioned site

// Create a Google Maps layer
var googleLayer = new olgm.layer.Google();

// Create a regular OL3 map, containing our Google layer
var map = new ol.Map({
    // use OL3-Google-Maps recommended default interactions
    interactions: olgm.interaction.defaults(),
    layers: [
        googleLayer
    ],
target: 'map',
view: new ol.View({
    center: center,
    zoom: 12
    })
});

// Activate the library
var olGM = new olgm.OLGoogleMaps({map: map});
olGM.activate();
-1
new ol.layer.Tile({source: new ol.source.TileImage({ url: 'http://khm{0-3}.googleapis.com/kh?v=742&hl=pl&&x={x}&y={y}&z={z}' })})

Not supported officially but you can use with a trick.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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