OL Google Hybrid Load Fail solved with pan.to (quick and dirty workaround)
The Google Hybrid map will fail when Openlayers centers is on a 90 lat or 0 lon.
by Thomas B.
HTML
<script src="//maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.13.1/theme/default/style.css">
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/style.css">
<body onload="init()">
<h1 id="title">Google (v3) Layer Example</h1>
<div id="tags">Google, api key, apikey, light</div>
<p id="shortdesc">Demonstrate use the Google Maps v3 API.</p>
<div id="map" class="smallmap" style="width: 640px;height: 480px;border: 1px solid #000;"></div>
<div id="docs">
<p>
<input id="animate" type="checkbox" checked="checked">Animated zoom (if supported by GMaps on your device)</input>
</p>
<p>If you use the Google Maps v3 API with a Google layer, you don't need to include an API key. This layer only works in the spherical mercator projection. See the <a href="google-v3.js" target="_blank">google-v3.js source</a> to see how this is done.</p>
</div>
</body>
CSS
.map {
width: 640px;
height: 480px;
border: 1px solid #000;
}
JavaScript
var map;
function init() {
map = new OpenLayers.Map('map', {
projection: 'EPSG:3857',
layers: [
new OpenLayers.Layer.Google(
"Google Hybrid", {
type: google.maps.MapTypeId.HYBRID,
numZoomLevels: 20
}), new OpenLayers.Layer.Google(
"Google Physical", {
type: google.maps.MapTypeId.TERRAIN
}),
new OpenLayers.Layer.Google(
"Google Streets", // the default
{
numZoomLevels: 20
}),
new OpenLayers.Layer.Google(
"Google Satellite", {
type: google.maps.MapTypeId.SATELLITE,
numZoomLevels: 22
})],
center: new OpenLayers.LonLat(-90, 25)
// Google.v3 uses web mercator as projection, so we have to
// transform our coordinates
.transform('EPSG:4326', 'EPSG:3857'),
zoom: 4
});
map.addControl(new OpenLayers.Control.LayerSwitcher());
// map.setCenter(new OpenLayers.LonLat(-90.5, 25).transform('EPSG:4326', 'EPSG:3857'),4);
// add behavior to html
var animate = document.getElementById("animate");
animate.onclick = function () {
for (var i = map.layers.length - 1; i >= 0; --i) {
map.layers[i].animationEnabled = this.checked;
}
};
}