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 need to change the old html code (the two element needs, 'gmap' and 'olmap' that mentioned 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, that without needing to add google api reference (for optimizing purposes) to 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 Google Terms of Use or not.