3

I have tried my best to take solutions here from diverse answers but my problem remains. The map does not show up properly. A grey frame is taking almost 3/4 of the frame. How the map shows up 

<div id="map"></div>

<script>

 var map = L.map('map',{scrollWheelZoom: false});
 map.setView(<%= @location.latlng %>, 16);
 marker = L.marker(<%= @location.latlng %>).addTo(map);
 L.tileLayer('http://a.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: 'Your attribution statement',
                      maxZoom: 20,
                      subdomains: '',
                      }).addTo(map)
$(document).ready(function(){
    L.Util.requestAnimFrame(map.invalidateSize,map,!1,map._container);
});
</script>
user6877257
  • 45
  • 1
  • 4

1 Answers1

4

See Data-toggle tab does not download Leaflet map.

You probably need a longer delay before calling map.invalidateSize(). Ideally listen to the event that opens your map container to its correct size.

ghybs
  • 47,565
  • 6
  • 74
  • 99