title: Google maps responsive resize
body: <p>I'm trying to get google maps responsive and resize while keeping its center when windows resizes. I read other stack questions in regards such as:</p>
  
  <p><a href="https://stackoverflow.com/questions/15421369/responsive-google-map">Responsive Google Map?</a> and <a href="https://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive">Center Google Maps (V3) on browser resize (responsive)</a></p>
  
  <p>from the second stack question <a href="http://hsmoore.com/keep-google-map-v3-centered-when-browser-is-resized/" rel="noreferrer">I got a link which helps me with part of the code</a> but I still have no luck. This is the code I am using, when I resize the window, the maps doesn't resize at all</p>
  
  <pre><code>    function initialize() {
        var mapOptions = {
         center: new google.maps.LatLng(40.5472,12.282715),
         zoom: 6,
         mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
                  mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
      google.maps.event.addDomListener(window, "resize", function() {
       var center = map.getCenter();
       google.maps.event.trigger(map, "resize");
       map.setCenter(center); 
      });
  </code></pre>
  
  <p>html</p>
  
  <pre><code> &lt;div id="map-canvas"/&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>html { height: 100% }
  body { height: 100%; margin: 0; padding: 0; }
  #map-canvas { height: 100%; }
  </code></pre>