title: Google Maps not showing despite setting parent div width and height to 100%
body: <p>I know there are plenty of posts with the same title and I went through as many of them as possible. Basically, I am trying to show a Google map inside a div whose height and width I have set to 100%, but the map is not showing. I tried to set the height and width of the <code>&lt;html&gt;</code> and <code>&lt;body&gt;</code> to 100% as well but the map still did not show. My relevant code is given below:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="section"&gt;
          &lt;div class="container"&gt;
              &lt;div id="map" style="width: 100%; height: 100%; position: absolute;"&gt;
                  &lt;div id="map-canvas"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="well"&gt;               
                  &lt;div class="panel-group" id="Accordion"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  ...
  
  &lt;script&gt;
  
      var spinner = new Spinner();
      $(document).ready(function(){
  
          var place = JSON.parse(localStorage.getItem("selectedplace"));
          console.log(place);
          if (place == null){ 
              ...
          }else{   
              google.maps.event.addDomListener(window,'load',loadMap);     
              getQueuesAtPlace(place["id"]);
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>function loadMap() {
  
      var source = JSON.parse(localStorage.getItem("currentplace"));
      var destination = JSON.parse(localStorage.getItem("selectedplace"));
  
      var lat = destination['latitude'];
      var long = destination['longitude'];
      var mapOptions = {
          center: new google.maps.LatLng(parseFloat(lat), parseFloat(long)),
          zoom: 8
          //mapTypeId: google.maps.MapTypeId.ROADMAP
      };
  
      console.log("CENTER: " + mapOptions.center);
      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  
      var marker=new google.maps.Marker({
          position: new google.maps.LatLng(parseFloat(lat),parseFloat(long)),
          map: map,
          title: 'Office location'
      });
  
  }
  </code></pre>
  
  <p>The JS part of the code is mostly copy-paste, so I think the mistake is in the positioning/style of the div. Ideally, I would like to have the map inside the <code>&lt;well&gt;</code> tag as well, but it's not showing anywhere. Can anyone point out the mistake?</p>