title: make the width of my google-maps responsive
body: <p>I have been searching for the right answer but I cannot find it.</p>
  
  <p>I have a google maps API which I try to get responsive when I make my browser width larger.</p>
  
  <p>In my javascript i have this code that interacts with my HTML DIV</p>
  
  <pre><code>  ui.map = new google.maps.Map(document.getElementById("map_canvas"), mapParams);
      ui.bounds = new google.maps.LatLngBounds();
  
      google.maps.event.addDomListener(window, 'resize', function() {
  map.setCenter(homeLatlng);
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id="map_canvas" class="map"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My CSS responsive code:</p>
  
  <pre><code>@media screen and (min-width: 800px) {
  #map_canvas {
  margin:0 auto; height:600px; min-width:450px; max-width:750px; float:right;
  </code></pre>
  
  <p>The problem is that my google MAP stays at 450px..
  Does anybody knows why my google map doesnt become larger when i make my browser width size bigger?</p>