Google Maps V3 Карта не загружается при добавлении слушателя

Question

Я пытаюсь добавить слушателя idle к картам Google.

Проблема: Когда я добавил слушателя, как показано ниже, я получаю ошибку Cannot read property '__e3_' of undefined

Код JS

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

Я решил это, добавив setTimeout(..., 1000), чтобы убедиться, что карта загружается через секунду.

Вопрос :

1. Ошибка из-за того, что карта не загружается?
2. Это лучший способ ее решить?
3. Должна ли возникать эта проблема? Я предполагаю, что если я добавлю этот же прослушиватель на карту без другого кода, эта ошибка не появится.

EDIT

Инициализация карты

<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.) Не совсем, Этот тип ошибки происходит, потому что вы пытаетесь получить доступ к объекту, который не существует в то время, когда вы пытаетесь присоединить слушателя.Код слушателя должен быть присоединен после того, как переменная карты содержит объект карты Google.Когда вы пытаетесь прикрепить слушателя?Я не вижу его в коде инициализации.

2.) Нет, таймауты не являются надежными.Если в инициализации имеется задержка, объект карты может все еще не инициализироваться через указанный интервал.

3.) Вы не можете получить доступ к свойствам несуществующего объекта.Добавление слушателя в метод init после создания экземпляра объекта карты решит эту проблему.

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');
    });
}

Вот рабочая скрипка с приведенным выше кодом: http://jsfiddle.net/R7d6L/