Leaflet Map wird im Bootstrap 3.0 Modal nicht richtig angezeigt
Ich habe ein großes Problem. Ich möchte eine Prospektkarte in einem Modal öffnen. Die Karte wird jedoch nicht richtig angezeigt. Die Fliesen werden nicht geladen.
Hier ist das Drehbuch:
<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Open Map</a>
<div id="myModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Map</h4>
</div>
<div class="modal-body">
<div class="modal-body" id="map-canvas"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal" aria-hidden="true">OK</button>
</div>
</div>
</div>
$.getScript('http://cdn.leafletjs.com/leaflet-0.7/leaflet.js',function(){
/* map settings */
var map = new L.Map('map-canvas');
var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/f1376bb0c116495e8cb9121360802fb0/997/256/{z}/{x} /{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
});
map.addLayer(cloudmade).setView(new L.LatLng(41.52, -71.09), 13);
});
Jede Hilfe sehr geschätzt