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.

Answer 1

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.