Using Tiled Google Map With OpenLayers 3

Question

How can I use google map with OpenLayers 3?
I want to migrate from OpenLayers 2 to 3. here is an example: google map integration with OpenLayers example
but using this method needs to change the old HTML code (two element needs, 'gmap' and 'olmap' that mentioned in the example).
Google Maps is officially not supported by ol3, but my question is:
"How can I use Google Maps Tile Service in my project like a MapServer, without needing to add google API reference (for optimizing purposes) to the scripts tag?"

Here is my old code that works correctly with OpenLayers 2:

var map = new OpenLayers.Map("map_canvas", {
    controls: [
        new OpenLayers.Control.PanZoomBar(),
        new OpenLayers.Control.ScaleLine(),
        new OpenLayers.Control.MousePosition(),
        new OpenLayers.Control.OverviewMap()
    ],
    units: "m",
    numZoomLevels: 21
});
var gmap = new OpenLayers.Layer.Google(
    { type: google.maps.MapTypeId.ROADMAP, numZoomLevels: 21}
);
map.addLayers([gmap]);

and html code:

<div id="map_canvas">
</div>

appreciate any help.

You can't use google's tiles without the API, that is against the terms of use (and they make it hard to do/maintain because of that) — geocodezip, Nov 29 '15 at 14:38
so, how can I use google map in OpenLayers 3 without change my old html code? — Pedram, Nov 29 '15 at 14:43
You still need to get the tiles data. As @geocodezip mentioned you can't use the google tiles service outside the API. You can use the open street maps tile service with some limits. See for more info. — steenhulthin, Nov 30 '15 at 06:41
There is an external library see: https://github.com/mapgears/ol3-google-maps — bartvde, Nov 30 '15 at 07:53

Pedram · Accepted Answer · 2019-09-24T09:55:43.783

12

I found the solution:

JsFiddle

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM({
            url: 'http://mt{0-3}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
            attributions: [
                new ol.Attribution({ html: '© Google' }),
                new ol.Attribution({ html: '<a href="https://developers.google.com/maps/terms">Terms of Use.</a>' })
            ]
        })
    })
  ],
  view: new ol.View({
    center: ol.proj.transform(
        [-110, 45], 'EPSG:4326', 'EPSG:3857'),
    zoom: 3
  })
});

html, body, #map {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

<link href="http://openlayers.org/en/master/css/ol.css" rel="stylesheet"/>
<script src="http://openlayers.org/en/master/build/ol.js"></script>
<div id="map"></div>

but I'm not sure that this code is in contrast with the Google Terms of Use or not.

edited Sep 24 '19 at 09:55

answered Nov 30 '15 at 07:59

Pedram

828
9
24

1

Brilliant. How did you figure that out? – Danny C May 16 '16 at 13:53
I worry that as an undocumented feature they could pull the rug in the future. In terms of Terms of Use- I tried to read through the guidelines. I'm no lawyer but its different if using satellite imagery, since also need to add attribution to 3rd parties. According to their guidelines you need to write "Powered by Google" or "Map data ©2015 Google". See [here](https://developers.google.com/maps/terms#section_9_4) and [here](http://www.google.com/permissions/geoguidelines/attr-guide.html). If you have a API license it might be different though. – Danny C May 16 '16 at 14:02
It is illegal to use Google tiles this way. See section 10.1a of the Terms of Use (https://developers.google.com/maps/terms#section_10_1): "For example, you must not access map tiles or imagery through interfaces or channels (including undocumented Google interfaces) other than the Maps API(s)." – ahocevar Aug 03 '17 at 08:57
1

@ahocevar: thank you, but I'm not sure about that. As "Danny C" said, maybe you can write a text in the bottom of the map for covering google terms of use. – Pedram Aug 05 '17 at 10:31
1

I realize that this is an older post, but is it still true that using the Google tiles from OpenLayers violates Google's TOS? I followed the link mentioned above by ahocevar and I can't find the quoted text anywhere in section 10.1. Does anyone know if you can legally do this now? – Terry Wilkinson Mar 07 '19 at 02:42

Using Tiled Google Map With OpenLayers 3

1 Answers1

Linked