Google Maps +ol2
HTML
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.13.1/theme/default/style.css">
<script src="http://dev.openlayers.org/releases/OpenLayers-2.13.1/lib/OpenLayers.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/style.css">
<div id="map" ></div>
CSS
#map{
width: 500px;
height: 320px;
}
JavaScript
var map;
function init() {
OpenLayers.Layer.Bing.prototype.serverResolutions.slice(10);
map = new OpenLayers.Map('map', {
projection: 'EPSG:3857',
layers: [
new OpenLayers.Layer.Google(
"Google Physical",
{type: google.maps.MapTypeId.TERRAIN}
),
new OpenLayers.Layer.OSM(null,null, {
resolutions:OpenLayers.Layer.Bing.prototype.serverResolutions.slice(10, 19)
}),
new OpenLayers.Layer.Bing({
key:"ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp",
type: "Road",
resolutions:[76.43702827453613,
38.218514137268066, 19.109257068634033, 9.554628534317017,
4.777314267158508, 2.388657133579254, 1.194328566789627,
0.5971642833948135, 0.29858214169740677, 0.14929107084870338,
0.07464553542435169, 0.03732276771218, 0.01866138385609
]
})
],
mapExtent:new OpenLayers.Bounds([8593356.4679,1419894.2374,8693947.5972,1478292.1270]),
restrictedExtent:new OpenLayers.Bounds([8593356.4679,1419894.2374,8693947.5972,1478292.1270])
});
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
init();