title: Google Maps not filling up the entire div
body: <p>I've been trying to set up google maps on my website, but it's is only showing a fraction of it, the div remains empty. A lot of solutions suggest I include the resize function, but that doesn't seem to work. Here is my code:</p>
  
  <pre><code>function initialize() {
      var mapCanvas = document.getElementById('map_canvas');
      var mapOptions = {
          center: new google.maps.LatLng(42.378343, 20.427202),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(mapCanvas, mapOptions)
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  google.maps.event.trigger(map, "resize");
  </code></pre>
  
  <p>Map Canvas and it's wrapping div are both set to 100% width. All help is appreciated</p>
  
  <p>Heres what it looks like: <img src="https://i.stack.imgur.com/VoE4K.png" alt="enter image description here"></p>