title: How can I detect a div resize?
body: <p>I have a map canvas that I need to check when it gets resized. The default <code>min-height</code> is 200px.</p>
  
  <p>The way it gets resized is that I click a button and an extra class is added to the div. This extra class changes the value of <code>min-height</code> to 350px.</p>
  
  <p>I've not been successful in adding an listener on the div. So the only solution that is working at the moment is the <code>.on('click)</code> event on the button.</p>
  
  <pre><code>    $('#resize').on('click', function(){
          setTimeout(function () {
              google.maps.event.trigger(map, "resize");
              map.fitBounds(bounds);
          }, 500);
      });
  </code></pre>
  
  <p>I've tried the following solutions without success:</p>
  
  <pre><code>    // Attemt 1
      google.maps.event.addDomListener(document.getElementById('map-canvas'), 'resize', function() {
          google.maps.event.trigger(map, "resize");
          map.fitBounds(bounds);
      });
  
      // Attemt 2
          google.maps.event.trigger(map, "resize");
          map.fitBounds(bounds);
      });
  
      // Attemt 3
      $(window).resize(function() {
          google.maps.event.trigger(map, "resize");
          map.fitBounds(bounds);
      });
  </code></pre>
  
  <p>You can see my <a href="http://jsfiddle.net/d7fykbzm/9/" rel="nofollow">JSFiddle here</a>.</p>
  
  <p>Does anyone know how I can achieve this?</p>