リスナーの追加時にGoogleマップV3の地図が読み込まれない

Question

Googleマップにリスナーidleを追加しようとしています。

問題：以下に示すように、私はリスナーを追加すると、私はエラーを取得するCannot read property '__e3_' of undefined

JSコード

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

私は確信してマップを作るために、setTimeout(..., 1000)を追加することによってそれを解決1秒後にロードされます。

質問：

1. が原因ロードされていないマップに誤りですか？
2. これを解決する最善の方法ですか？
3. この問題は発生するはずですか？私は他のコードなしでこの同じリスナーをマップに追加するとこのエラーはポップアップしないだろうと推測しています。地図

   <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> 
   

   の

EDIT

初期

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/