8

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?

20

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?

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

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

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

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

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

  • 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... – Michał Okulewicz Mar 11 '17 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 – Michał Okulewicz Mar 11 '17 at 22:01
  • I doubt this is a legal approach – bartvde Jun 28 '17 at 13:07
  • 2
    I haven't been aware, but @bartvde is right: No access to APIs or Content except through the Service – Michał Okulewicz Jun 29 '17 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.

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.