Ich versuche, eine Google-Karte mit Twitter Bootstrap in ein Modal einzufügen. Das Modal wird mit der Form der vorhandenen Karte angezeigt, aber nur ein Teil der Karte wird angezeigt, der Rest ist grau. Wenn Sie die Größe des Bildschirms ändern, wird die Karte immer korrekt angezeigt, obwohl sie an der falschen Stelle zentriert ist.

Ich habe nach Vorschlägen gesucht und diese gefunden, z. B. das Aufrufen des Größenänderungsereignisses der Karte oder das Festlegen der maximalen Breite des Kartenbilds auf "Keine", aber keiner dieser Vorschläge hat bisher geholfen. Es sieht so aus, als würde die Karte nicht die richtige Größe ermitteln, solange sie sich in einem verborgenen Element befindet.

JS

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(51.219987, 4.396237),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapCanvas"),
    mapOptions);
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.219987, 4.396237)
  });
  marker.setMap(map);
}

HTML

<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3></h3>
  </div>
  <div class="modal-body">
    <div id="mapCanvas" style="width: 500px; height: 400px"></div>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
  </div>
</div>

Ich verwende Twitter Bootstrap v2.0.4. Ich benötige Hilfe, da ich das Größenänderungsereignis nicht korrekt auslöse oder das CSS nicht so bearbeite, dass die Google-Karte in Ruhe gelassen wird.