title: Google Maps V3 Map not loaded when adding listener
body: <p>I am trying to add an <code>idle</code> listener to google maps. </p>
  
  <p><strong>Problem:</strong> When I added the listener as shown below, I get the error <code>Cannot read property '__e3_' of undefined</code></p>
  
  <p><strong>JS Code</strong></p>
  
  <pre><code>google.maps.event.addListener(map, 'idle', function() {
              console.log('hello');
  }
  </code></pre>
  
  <p>I solved it by adding a <code>setTimeout(..., 1000)</code>, to make sure the map is loaded after a sec. </p>
  
  <p><strong>Question</strong>: </p>
  
  <ol>
  <li>Is the error due to the map not being loaded? </li>
  <li>Is this the best way to solve it?</li>
  <li>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.</li>
  </ol>
  
  <p><strong>EDIT</strong></p>
  
  <p><strong>Initialization of Map</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  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);
  
  }
  &lt;/script&gt;
  </code></pre>