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

25

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
    Commented Oct 26, 2017 at 13:02
  • 1
    This shows satellite view, how can I show the default view that loads on google map?
    – BiJ
    Commented Feb 28, 2018 at 8:57
  • @BiJ default view? roadmap or hybrid? I added roadmap view tile define this answer. Commented Feb 28, 2018 at 10:41
  • Hi, it's not working anymore (404) do you have a workaround? Commented Oct 15, 2018 at 9:26
  • 1
    Hi @AlexandreMélard I updated this code sample and its work perfectly, jsfiddle.net/omurbilgili/eyytw0gc/569 Commented Oct 19, 2018 at 12:46
10

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
  • 3
    Be careful if you plan to use this; it is a direct violation of Google Maps' terms of service and you will likely get in trouble. Commented Aug 21, 2018 at 5:23
  • what about traffic layer
    – Saroj
    Commented Jun 26, 2019 at 7:27
  • According to this page blinktag.com/google-transit-layer-through-google-maps-api for traffic layer you may use this url: mt1.google.com/vt/…... But, as noted by Alex McMillan, using google maps inside a not google library is a violation of term of service. Commented Jun 28, 2019 at 12:26
  • @AlexMcMillan lists.osgeo.org/pipermail/openlayers-dev/2012-April/008625.html "you should consider this email the "written consent" that you need from us to continue using the Google Maps APIs in OpenLayers" this is old though, I wonder if they still offer consent. It probably still requires the use of an account key.
    – ADJenks
    Commented Oct 20, 2021 at 22:24
  • @ADJenks The last entry of your link actually suggests there is NO LONGER consent from Google: "I'm afraid the comments in the blog post and 10.2 (a) in the TOS make it quite clear that it is not permitted to wrap the Google Maps API in another mapping API like OpenLayers." - lists.osgeo.org/pipermail/openlayers-dev/2012-April/008625.html Commented Oct 23, 2021 at 20:42
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. Commented Nov 27, 2017 at 10:05
  • 2
    It works but it's a violation of their terms of service.
    – bartvde
    Commented 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... Commented 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 Commented Mar 11, 2017 at 22:01
  • 1
    I doubt this is a legal approach
    – bartvde
    Commented 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 Commented 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

0

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
    Commented Jan 8, 2021 at 9:05

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.