title: How to make google map full width with bootstrap?
body: <p><br>
  Map doesn't work when I make it full width. <br>
  Here's my HTML code: <br></p>
  
  <pre><code>&lt;section&gt;
      &lt;div class="container"&gt;
           &lt;div id="map"&gt;&lt;/div&gt;
           &lt;script&gt;
              function initMap() {
                  var mapDiv = document.getElementById('map');
                  var map = new google.maps.Map(mapDiv, {
                    center: {lat: 44.540, lng: -78.546},
                    zoom: 8
                  });
               }
            &lt;/script&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>CSS Code :</strong> </p>
  
  <pre><code>html,
  body {
      width: 100%;
      height: 100%;
  }
  #map {
      position: absolute;
      width: 100%;
      left: 0;
  }
  </code></pre>
  
  <p>But it doesn't display the map. What am I doing wrong?</p>