4

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&amp;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> 
5

OftenThe Google layers work differently from other layer types as they are loaded through the Google API rather than OpenLayers code.

The loadend issue is logged as a bug in the OpenLayers bug tracker, but its status has since been changed to a (non-completed) feature.

Instead you could try capturing the tilesloaded event from the Google API, and put your custom function when this event is called.

If you have a Google map layer, then you also have the Google API loaded, and access to the Google map object so you should be able to use something like:

GEvent.addListener(gmaplayer.mapObject, "tilesloaded", function() {
  console.log("Tiles loaded");
});
  • 2
    If you are using google maps version 3, then it will be "google.maps.event.addListener" instead of "GEvent.addListener". – Srisa May 23 '13 at 11:10
1

it also works without needing GEvent

google.maps.event.addListenerOnce(openlayersMap.baseLayer.mapObject,
                                 'tilesloaded', 
                                 function(){
                                    alert("Map Loaded!");
                                  }
                                 );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.