title: Google map not showing when in a hidden div
body: <p>I know this is a common issue reported on this site and elsewhere e.g.</p>
  
  <ul>
  <li><a href="http://blog.codebusters.pl/en/entry/google-maps-in-hidden-div" rel="nofollow">http://blog.codebusters.pl/en/entry/google-maps-in-hidden-div</a></li>
  <li><a href="http://dougmolineux.com/wp/?p=242" rel="nofollow">http://dougmolineux.com/wp/?p=242</a></li>
  </ul>
  
  <p>But I can't get my issue solved.</p>
  
  <p>So I've got a responsive site built Mobile first and I'm trying to get an adaptive map solution working i.e. mobile viewports get a static Google map image and for non-mobile viewports the full Google map API and this all has to update itself when the viewport resizes not just on page load. Based on this: <a href="http://codepen.io/bradfrost/pen/tLxAs" rel="nofollow">http://codepen.io/bradfrost/pen/tLxAs</a>.</p>
  
  <p>I'm using <a href="http://wicky.nillia.ms/enquire.js/" rel="nofollow"><strong>this library</strong></a>. </p>
  
  <p>I'm conditionally loading the Maps API only when it's needed (non-mobile viewports) via jQuery's <code>$.getScript</code> and the libraries <code>setup()</code> and <code>defer()</code> functions. </p>
  
  <p>So that there's only the right map rendering at each viewport I'm using jQuery <code>hide()</code> and <code>show()</code> because of this the API map won't fully load itself (just 1 tile), well it does load fine if the page loads at a non-mobile viewport size, it's when you resize to mobile viewport back to non-mobile viewport size as that's when the <code>show()</code> method kicks in. Everything else works fine.</p>
  
  <p>Here's my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="map"&gt;
      &lt;div class="map__static"&gt;
          &lt;img src="http://maps.google.com/maps/api/staticmap?center=-33.867487,151.20699&amp;zoom=15&amp;markers=-33.867487,151.20699&amp;size=650x405&amp;sensor=false"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The static map image is loaded by default as the site is built Mobile first.</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var mapContainer = $('.map'),
  mapStaticContainer = $('.map__static');
  mapDynamicContainer = $('&lt;div class="map__dynamic"/&gt;');
  
  // Start Enquire library
  enquire.register('screen and (min-width: 40em)', {
  
      deferSetup: true,
  
      setup: function setup() {
          mapContainer.prepend(mapDynamicContainer);
          mapDynamicContainer.load('/includes/scripts/adaptive-google-map.php', function() {
              $.getScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyAywjPmf5WvWh_cIn35NwtIk-gYuwu1I2Q&amp;sensor=false&amp;callback=initialize');
          });
      },
  
      // Not mobile size viewport
      match: function() {
          mapStaticContainer.hide();
          mapDynamicContainer.show();
      },
  
      // Mobile size viewport
      unmatch: function() { 
          mapStaticContainer.show();
          mapDynamicContainer.hide();
      }
  
  }, true).listen();
  </code></pre>
  
  <p>This is the contents of <strong>'/includes/scripts/adaptive-google-map.php'</strong> which is AJAX'd in via jQuery <code>load()</code>.</p>
  
  <pre><code>&lt;div id="map_canvas"&gt;&lt;/div&gt;
  &lt;script&gt;
      function initialize() {
      var myLatlng = new google.maps.LatLng(-33.867487,151.20699);
      var myOptions = {
        zoom: 15,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
      }
      map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
      var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          animation: google.maps.Animation.DROP
      });
      var contentString = 
          '&lt;div class="infowindow"&gt;'+
              '&lt;div&gt;'+
                      '&lt;p class="flush"&gt;&lt;strong&gt;SALES OFFICE:&lt;/strong&gt;&lt;br&gt;1/16 M. 5&lt;br&gt;Sydney&lt;br&gt;NSW, 83110.&lt;/p&gt;'
              '&lt;/div&gt;'+
          '&lt;/div&gt;'
      ;
      var infowindow = new google.maps.InfoWindow({
          content: contentString
      });
      google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
      });
      // Center Google Maps (V3) on browser resize (http://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive)
      var center;
      function calculateCenter() {
          center = map.getCenter();
      }
      google.maps.event.addDomListener(map, 'idle', function() {
          calculateCenter();
      });
      google.maps.event.addDomListener(window, 'resize', function() {
          map.setCenter(center);
      });
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>This fixes the problem:</p>
  
  <pre><code>mapDynamicContainer.show(function () {
      setTimeout(function() {
      initialize(); 
  }, 100);
   })
  </code></pre>
  
  <p>But throws a JS error: <code>Uncaught ReferenceError: initialize is not defined</code>. Another common fix suggested by ppl. is applying this: <code>google.maps.event.trigger(map, 'resize');</code> but when I put that after: <code>mapDynamicContainer.show();</code> in the <code>match()</code> function I get this JS error: <code>Uncaught ReferenceError: google is not defined</code>. </p>
  
  <p>Not having much luck :(</p>