title: google map api resize map
body: <p>i have a full map of google in my web and clicking on a marker, a panel on the left side will pop out. Problem is my map size is still the same inwhich the panel covers up half of it.</p>
  
  <p>i have a code to center the marker that was chosen and resize the map to fir in the new window once the panel on the left side pops out but it doesnt seem to work:</p>
  
  <pre><code>function initialize() {
  
      var center = new google.maps.LatLng(XXXXXX, XXXXXXX);
  
      var map = new google.maps.Map(document
      .getElementById('MAP'), {
          zoom : 13,
          minZoom: 5,
          center : center,
          styles :　googleStyle,
          mapTypeId : google.maps.MapTypeId.ROADMAP
      });
  
      var markers = [];
      var infoBubble = new InfoBubble({
          map: map,
          padding: 10,
          arrowPosition: 30,
          arrowSize: 10,
          backgroundColor: 'white',
          borderColor: 'white',
          borderRadius: 4,
          arrowStyle: 2,
          maxWidth: 250,
          hideCloseButton: true,
      });
  
      Some more codes related to marker...
  
      google.maps.event.addListener(markers[i], 'click', function(e) {
  
          Some more codes related to marker...
  
          // THIS I THINK IS THE ONE TO RESIZE THE MAP
          var latLngAdjust = new google.maps.LatLng(csCoordinateLat, csCoordinateLng + 0.00018);
          layoutV.layout.open('west');   // THE LAYOUT THAT WILL POP OUT
  
          window.setTimeout(function() {
              map.setZoom(17);
              map.panTo(latLngAdjust);  // THIS I ASSUME TO RESIZE THE MAP AND CENTER THE MARKER CHOSEN
          }, 300);
      }
  }
  </code></pre>
  
  <p>Anyone have any idea why map doesnt resize and instead the panel just goes on top of the map?</p>