Question

I am trying to add an idle listener to google maps.

Problem: When I added the listener as shown below, I get the error Cannot read property '__e3_' of undefined

JS Code

google.maps.event.addListener(map, 'idle', function() {
            console.log('hello');
}

I solved it by adding a setTimeout(..., 1000), to make sure the map is loaded after a sec.

Question:

1. Is the error due to the map not being loaded?
2. Is this the best way to solve it?
3. Is this problem supposed to occur? I am guessing that if I added this same listener to map without other code, this error will not popup.

EDIT

Initialization of Map

<script type="text/javascript">
var map;
var geocoder;
var directionsService = new google.maps.DirectionsService();

function initialize() {
    var center_latlng = new google.maps.LatLng(42.354183,-71.065063);
    var options = {
        zoom: 15,
        minZoom: 11,
        maxZoom: 19,
        center: center_latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), options);

    var Style = [
      {
        featureType: "poi",
        elementType: "labels",
        stylers: [
          { visibility: "off" }
        ]
      },{
        featureType: "landscape",
        elementType: "labels",
        stylers: [
          { visibility: "off" }
        ]
      }
    ]
    map.setOptions({styles: Style});

    geocoder = new google.maps.Geocoder();

    // Marker Clusterer
    var styles = {styles: [{
                        height: 34,
                        url: "images/template/markers/cluster.png",
                        width: 34,
                        textColor: '#FFF',
                        textSize: 12
                    },
                    {
                        height: 56,
                        url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m2.png",
                        width: 56
                    },
                    {
                        height: 66,
                        url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m3.png",
                        width: 66
                    },
                    {
                        height: 78,
                        url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m4.png",
                        width: 78
                    },
                    {
                        height: 90,
                        url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m5.png",
                        width: 90
                    }]
                };
    var mcOptions = {gridSize: 50, maxZoom: 15,  styles: styles['styles']};
    mc = new MarkerClusterer(map, [], mcOptions);

}
</script>

Answer 1

1.) Not exactly, This type of error is occurring because you are trying to access an object that doesn’t exist at the time you try to attach the listener. The listener code must be attached after the map variable contains the Google map object. When are you trying to attach the listener? I do not see it in the initialization code.

2.) No, timeouts are not reliable. If there is a delay in the initialization the map object may still not be initialized at the specified interval.

3.) You can not access properties of an object that doesn’t exist. Adding the listener in the init method after the map object is instantiated will solve this problem.

var map;

function initialize() {
    var center_latlng = new google.maps.LatLng(42.354183, -71.065063);

    var options = {
        zoom: 15,
        minZoom: 11,
        maxZoom: 19,
        center: center_latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    //instantiate map object
    map = new google.maps.Map(document.getElementById("map_canvas"), options);

    //attach listener to the map object.
    google.maps.event.addListener(map, 'idle', function() {
        console.log('hello');
    });
}

here is a working fiddle with the above code: http://jsfiddle.net/R7d6L/