3

I have a ` with a specific height, inside of it I want to put my leaflet map. But the problem is that the map doesn't fill 100% of the height of its container. Why does my map not show up?

HTML is as follows:

  <div class="col-xs-12 col-sm-9  margin-zero map-padding">
    <div class="row  soft-padding  margin-zero" >
      <div  id="map"  class="container border-solid-black">
      </div>
    </div>
  </div>

CSS:

.col-sm-9{
  height: 500px;
}

#map{
  height: 100%;
}

And JS:

var map;
map = L.map( 'map', {
  center: [33.960057, -6.916462],
  minZoom: 2,
  zoom: 14,
  zoomControl: true
});
L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
  maxZoom: 20,
  subdomains:['mt0','mt1','mt2','mt3']
}).addTo( map );
  • 1
    Please note that accessing map tiles from google maps in that way is against the ToU of google maps. – IvanSanchez Jun 29 '17 at 8:42
2

In CSS, percentage units refer to the parent DOM element. In your HTML+CSS code, you're setting the map (<div id="map" class="container border-solid-black">) to 100% of its parent (<div class="row soft-padding margin-zero" >), but you are giving a height to the grandparent (<div class="col-xs-12 col-sm-9 margin-zero map-padding">) element of the map.

Remove that DOM element in between the map container and the div with height, and you should be fine. Remember to use the developer tools in your browser to check the actual sizes of any DOM elements.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.