title: Google map showing grey areas when resized
body: <p>I have a Google map with an expand button that when clicked expands the size of the map. The problem is when this is done, the map shows grey area's as if it hasn't been re-drawn.</p>
  
  <p>I've tried putting in <code>google.maps.event.trigger(map, 'resize');</code> but that doesn't seem to do anything.</p>
  
  <p>I've tried:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
        jQuery(document).ready(function( $ ) {
            $("#expand").click(function(){
                $("#map").animate({height: '1000'}, 1500 );
                google.maps.event.trigger(map, 'resize');
            });
            });
  &lt;/script&gt;
  </code></pre>
  
  <p>If you click the expand link above the map, the map expands but has grey areas, if you then click the expand button again the grey areas get drawn. How can I trigger this on animate?</p>
  
  <p><strong>I've searched and searched on Stack for the answer to this question and tried out all that is suggested but still no luck. I think people have just accepted answers or not fully filled out the final solution.</strong></p>