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
so, how can I use google map in OpenLayers 3 without change my old html code? — Pedram
There is an external library see: github.com/mapgears/ol3-google-maps — bartvde

Pedram Pedram · Accepted Answer · 2015-11-30T07:59:41

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.

Using Tiled Google Map With OpenLayers 3

1 Answers