title: Google Maps API v3 - Hidden Div - Map not centered in div
body: <p>I've looked at several questions that are similar, but I'm still not finding a resolution. </p>
  
  <p>I have this page: <a href="http://www.citizensmemorial.com/Test2014/locations/cmh-infectious-disease-and-internal-medicine-clinic/index.html" rel="nofollow">http://www.citizensmemorial.com/Test2014/locations/cmh-infectious-disease-and-internal-medicine-clinic/index.html</a></p>
  
  <p>I'm using this code:</p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBs_4MZDYZTCtkoB-Hbo4qQyWy-qHQuEdA"&gt;&lt;/script&gt;
  &lt;script&gt;
  var mapExists = document.getElementById('map-canvas'); if(mapExists) 
  var map;
  function initialize() {
  var myLatLng = new google.maps.LatLng (37.625387, -93.424350)
    var mapOptions = {    
      zoom: 12,
      center: myLatLng
    };   
   map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
         var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: 'CMH Infectious Disease &amp; Internal Medicine Clinic'
  });
  }
  google.maps.event.addDomListener(window, 'load', initialize);
      &lt;/script&gt;
  </code></pre>
  
  <p>Here is the applicable css:</p>
  
  <pre><code>html, body, #map-canvas {
      width:100%;
      height:100%
  }
  #map_canvas {
  position: relative;
  }
  .map-holder {
  width:500px;
      height:270px;
      padding: 0px;
      display:table; 
      margin-top:3px; 
      float:right;
  }
  </code></pre>
  
  <p>I'm assuming that it is something related to the css that is keeping the map from centering, as I've tested the map code by itself at this url and it is working:
  <a href="http://www.citizensmemorial.com/Temp/mapTest.html" rel="nofollow">http://www.citizensmemorial.com/Temp/mapTest.html</a></p>