I'm trying to register a listener event on "loadend" for my google maps layer on OpenLayers. But for some reason it's not firing. There must be something small i'm overlooking. What is wrong with my code?
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers Google (v3) Layer Example</title>
<link rel="stylesheet" href="../js/OpenLayers/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<style>
.olLayerGoogleCopyright{ display: none};
</style>
<script src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"></script>
<script src="../js/OpenLayers/OpenLayers.js" type="text/javascript"></script>
<script>
var map;
var gmapLayer;
function init() {
map = new OpenLayers.Map('map');
gmapLayer = new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 20, 'sphericalMercator': true }
);
gmapLayer.events.register("loadend", gmapLayer, function (e) {
console.log(e);
});
map.addLayer(gmapLayer);
// Google.v3 uses EPSG:900913 as projection, so we have to
// transform our coordinates
map.setCenter(new OpenLayers.LonLat(10.2, 48.9).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 12);
}
</script>
</head>
<body onload="init()">
<div id="map" class="smallmap"></div>
</body>
</html>