Google Karte wird nicht im bootstrap modalen Popup angezeigt

Question

Karte wird nicht auf Bootstrap Modal Popup angezeigt.

Modal Popup kommt mit einer leeren Seite, wie man eine Karte darin anzeigen. Ich habe alle Skripte und CSS-Dateien hinzugefügt. Helfen Sie mir!

HTML

<div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Google Maps</h4> 
      </div> 
      <div class="modal-body"> 

       <div id="map_canvas" style="width:auto; height: 400px;"></div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 
// button 
<td><a href="#" onclick="loadMap('@callinfo.latitude','@callinfo.longitude')" data-toggle="modal" data-target="#myModal"><i class="fa fa-map-marker"></i></a></td> 

JS

<script> 
    function loadMap(lat, lon) { 
     var mapOptions = { 
     center: new google.maps.LatLng(lat, lon), 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.HYBRID 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     mapOptions); 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(lat, lon) 
    }); 
    marker.setMap(map); 
    } 

    //show map on modal 
$('#myModal').on('shown.bs.modal', function (lat, lon) {  
    loadMap(lat, lon); 
}); 
</script> 

Answer 1

allererst die onclick attr aus dem ein Element entfernen.

Die Methode loadMap sollte nur einmal ausgeführt werden, und zwar vom shown.bs.modal Ereignis.

Aber diese Ereignisfunktion nimmt nicht die lat & lon als Argumente.

hinzufügen lat & lon als Daten auf einem Element Attribute, zum Beispiel die map_canvas div:

<div id="map_canvas" data-lat="@callinfo.latitude" data-lon="@callinfo.longitude" style="width:auto; height: 400px;"></div> 

dann diese Werte in der shown.bs.modal Veranstaltung wie diese abrufen:

$('#myModal').on('shown.bs.modal', function() {  
    loadMap($("#map_canvas").attr("data-lat"), $("#map_canvas").attr("data-lon")); 
});