How to add Google basemaps in openlayers-3?

Question

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.

Integrated

What have you tried so far? Please show us your code. – Cali

Answer 1

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

Corral

Answer 2

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.

Frankforter

The example link is no longer valid. – Converge

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

Floriaflorian

Answer 4

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

Floorboard

Answer 5

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();

Vermilion

Answer 6

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.

Fecundate