title: Resizing google map according to browser resizing
body: <p>i am working on google map api v3. map is perfectly showing on my page... problem is that when i resize the browser, map fit to its original size when i load the page... </p>
  
  <p>initial state when i load the page<img src="https://i.stack.imgur.com/rbpeK.png" alt="enter image description here"></p>
  
  <p>when i resize the browser, map is still sized at initial state size.</p>
  
  <p><img src="https://i.stack.imgur.com/WnXC4.jpg" alt="enter image description here"></p>
  
  <p>[Code]</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery-1.7.2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  
  &lt;script type='text/javascript'&gt;
  var point;
  var mrktx;
  
  function mshow()
  {
          $("#search_content").css("display","");
  }
  function mhide()
  {
          $("#search_content").css("display","none");
  }
  
  function load() {
  
     if(navigator.geolocation)
     {
          navigator.geolocation.getCurrentPosition(ShowPosition)
     }
     else
     {
        alert("Browser does not support");
        setTimeout( function(){ window.location = "../" },500);
     }
     function ShowPosition(position)
     {
          var lat = position.coords.latitude;
          var lng = position.coords.longitude;
  
  
     var cwidth = document.getElementsByTagName("body")[0].clientWidth;
     var cheight = document.getElementsByTagName("body")[0].clientHeight;
     //alert(cwidth + ',' + cheight);
      $("#body").css("overflow","hidden");
     $("#map_canvas").css("position","absolute");
     $("#map_canvas").css("overflow","auto"); 
     $("#map_canvas").css("height",cheight);
     $("#map_canvas").css("width",cwidth);
     $("#map_canvas").css("z-index","99")
     $("#map_canvas").css("top","0");
     $("#map_canvas").css("left","0em");
     $("#top_nav").css("width",cwidth);
     $("#top_nav").css("height","8%");
  
     var latlng = new google.maps.LatLng(lat,lng);
     var myOptions = {
        zoom: 11,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
     };
  
     var map = new google.maps.Map(document.getElementById("map_canvas"), 
                myOptions);
  
     $('document').resize(function(){
          google.maps.event.trigger(map, 'resize');
          map.setZoom( map.getZoom() );
     });
  
  
  
     var myMrkrTxt = "";
     var infowindow = new google.maps.InfoWindow({ content : myMrkrTxt });      
     var myMrkr = new google.maps.Marker({position:latlng,map:map});
          google.maps.event.addListener(myMrkr,'mouseover', function(){ infowindow.open(map,myMrkrTxt); });
          google.maps.event.trigger(map, "resize");
  
  
     }
  
  }
  &lt;/script&gt;
  &lt;style&gt;
  #top_nav
  {
      position: absolute; z-index: 200; top: 0px; background-color: black;
  }
  #top_nav h2
  {
      color: white;
  }
  body, html {
    height: 100%;
    width: 100%;
  }
  
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body onload='load()'&gt;
  
  
  &lt;div id="map_canvas"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>