title: Google map doesn't fill the <div>
body: <p>I have a problem: on one of the pages of my site I use a google map and the problem is that it doesn't fill at 100% the div - the map fills at about 20% of the div. I tried couple of things but I can't fix this. I will be grateful for any help in resolving this issue! You may see the problem at: <a href="http://travulum.com" rel="nofollow">http://travulum.com</a> (please click "menu", than "travel videos" and click one of travel videos - the first time google map fills the div at 100%, but if you click on second travel video - the second time google map doesn't fill the div at 100% and etc.....
  I use this script: </p>
  
  <pre><code>function updatePlayer(video_data){
  
  
  
      $('#map_canvas').empty().removeAttr('style');
  
  
  
      var BigPlayer = $('#bambuserPlayer').empty();
  
  
  
      if(typeof video_data !== 'undefined'){
  
  
  
          var map_center = new google.maps.LatLng(parseFloat(video_data.lat), parseFloat(video_data.lon));
  
  
          var myOptions =  {       
  
              zoom:10,
  
              center: map_center,
  
              mapTypeId: google.maps.MapTypeId.HYBRID,
  
              streetViewControl: false,
  
              panControl: false
  
          };
  
          map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
  
  
          var marker = new google.maps.Marker({
  
              position: map_center,
  
              map: map,
  
              icon: createMarkerIcon('archived')
  
          });
  
  
          var url = 'http://embed.bambuser.com/broadcast/' + video_data.id;
  
          BigPlayer.html('&lt;iframe width="450" height="450" src="'+ url +'" frameborder="0" &gt;&lt;/iframe&gt;');
  
      }
  
  }
  </code></pre>