12

I want to know if the latest version of Openlayers (v4.0.1) supports Google Maps as a Tile Layer. I can't find any document ion about this. If Openlayers doesn't support Google Maps, could someone tell me if there is any way to do this?

6 Answers 6

24

I can use Google Maps in OpenLayers 4.2 like this under my WMS layer and its perfectly fitted with EPSG:3857 projection:

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

Why do you need a plugin?

Youtube link

JSFiddle link

for ROADMAP

new ol.layer.Tile({ source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=m@113&hl=en&&x={x}&y={y}&z={z}' })})

If you face the fitted problem with EPSG:3857 projection when you use Geoserver or other vector sources; use like this

new ol.layer.Tile({
        'title': 'Google Maps Uydu',
        'type': 'base',
         visible: true,
        'opacity': 1.000000,
         source: new ol.source.XYZ({
         attributions: [new ol.Attribution({ html: '<a href=""></a>' })],
         url: 'http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}&s=Ga'
         })
}),
12
  • Awesome! After googling the entire first half of the day, this is the best solution that saved me a lot of work! :)
    – AME
    Oct 26, 2017 at 13:02
  • 1
    This shows satellite view, how can I show the default view that loads on google map?
    – BiJ
    Feb 28, 2018 at 8:57
  • @BiJ default view? roadmap or hybrid? I added roadmap view tile define this answer. Feb 28, 2018 at 10:41
  • Hi, it's not working anymore (404) do you have a workaround? Oct 15, 2018 at 9:26
  • 1
    Hi @AlexandreMélard I updated this code sample and its work perfectly, jsfiddle.net/omurbilgili/eyytw0gc/569 Oct 19, 2018 at 12:46
9

It's possible to us ol.source.Tile to access to every google maps. For everybody needs it, this is the basic code to create every available google maps layer to add to a map developed in Openlayers 4:

var googleLayerRoadNames=new ol.layer.Tile({
    title: "Google Road Names",
    source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=h&x={x}&y={y}&z={z}' }),
});

var googleLayerRoadmap=new ol.layer.Tile({
    title: "Google Road Map",
    source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}' }),
});

var googleLayerSatellite =new ol.layer.Tile({
    title: "Google Satellite",
    source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=s&hl=pl&&x={x}&y={y}&z={z}' }),
});

var googleLayerHybrid =new ol.layer.Tile({
    title: "Google Satellite & Roads",
    source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}' }),
});

var googleLayerTerrain =new ol.layer.Tile({
    title: "Google Terrain",
    source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=t&x={x}&y={y}&z={z}' }),
});

var googleLayerHybrid2 =new ol.layer.Tile({
    title: "Google Terrain & Roads",
    source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=p&x={x}&y={y}&z={z}' }),
}); 

var googleLayerOnlyRoad=new ol.layer.Tile({
    title: "Google Road without Building",
    source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}' }),
});
6
5

No it doesn't, and it will probably never support it, since there is no direct tiles access with GMaps. The only option that I know of is still something like: https://github.com/mapgears/ol3-google-maps

2
  • 1
    I could not get, what is the issue here, Ömür Bilgili already gave the sample code which works fine. Nov 27, 2017 at 10:05
  • 2
    It works but it's a violation of their terms of service.
    – bartvde
    Nov 27, 2017 at 14:06
3

I have already given an answer here: https://stackoverflow.com/a/42616386/6068293 could you please comment if that is what you are looking for?

Creating a solution for the plain map data would need to combine the understanding of the data downloaded by such requests: https://www.google.pl/maps/vt/stream/pb=!1m7!8m6!1m3!1i11!2i348!3i816!2i4!3x65535!2m3!1e0!2sm!3i375060690!2m38!1e2!2sspotlight!4m2!1sgid!2sXMf6EbH1C4DOnd6foX0POg!8m32!1m2!12m1!20e1!2m8!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos+Angeles%2C+Kalifornia%2C+Stany+Zjednoczone!4m2!3d34.0522342!4d-118.24368489999999!5e1!6b1!9e0!11e1!13m10!2shplexp%2Ca!15b1!18m3!5b0!6b0!8b0!22m3!6e2!7e3!8e2!19u6!19u7!19u11!19u12!19u14!19u20!20m1!1e6!3m8!2spl!3spl!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e1!6m6!1e12!2i2!28e3!39b1!44e2!50e0&authuser=0

The creation of data in the memory of the browser: https://superuser.com/questions/948738/what-is-the-blobhttp-prefix-and-where-can-i-learn-more-about-this and retrieving tiles from BLOB data put in the browser

4
  • One more thought on the subject. Tiles are available under a following addresses: maps.google.com/maps/… which have been utilized by a previous version of OpenLayers and GoogleMaps API itself. The only problem is to find out the meaning of the pb parameter... Mar 11, 2017 at 21:54
  • I still don't know the whole pb argument, but X, Y and ZOOM of the tile are placed as marked below: !1m5!1m4!1i{ZOOM}!2i{X}!3i{Y}!4i256!2m3!1e0!2sm!3i3175062737!3m9!2spl!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0 Mar 11, 2017 at 22:01
  • 1
    I doubt this is a legal approach
    – bartvde
    Jun 28, 2017 at 13:07
  • 3
    I haven't been aware, but @bartvde is right: No access to APIs or Content except through the Service Jun 29, 2017 at 8:48
1

There is a way to include google maps to openlayers. You can copy my code. (TypeScript)


import {Layer} from './../abstract-layer';
import {Injectable} from '@angular/core';

declare var ol: any; declare var window: any;

@Injectable() export class GoogleLayers extends Layer { private layers = []; private language = 'en'; private country = 'US';

constructor() { super(); var me = this; let layerRoad = new ol.layer.Tile({ visible: false, preload: Infinity, source: new ol.source.TileImage({ wrapX: true, maxZoom: 19, url: `http://maps.google.de/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i375060738!3m9!2s${this.language}!3s${this.country.toUpperCase()}!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0` }) }); layerRoad.displayName = 'Google Maps Road'; let layerSatelliet = new ol.layer.Tile({ visible: false, preload: Infinity, source: new ol.source.TileImage({ maxZoom: 19, wrapX: true, url: `https://www.google.de/maps/vt/pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m2!1e1!3i762!3m9!2s${this.language}!3s${this.country.toUpperCase()}!5e1105!12m1!1e4!12m1!1e47!12m1!1e3!4e0!5m1!1e0` }) }); layerSatelliet.displayName = 'Google Maps Satellit'; this.layers.push(layerRoad); this.layers.push(layerSatelliet); } getLayers() { return this.layers; } }

enter image description here

-1

Openlayers has stopped supporting Google maps from version 3 onwards. Try to use leaflet instead of Openlayers. Which is light weight and has most of the features of Openlayers. If anything is missing you can easily add it as a plugin.Adding Google Maps using ol.layer.Tile is against Google license agreements.

1
  • I don't know why people are downvoting - this answer is correct.
    – Eoin
    Jan 8, 2021 at 9:05

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.