How to make google map full width with bootstrap?
<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>