ブートストラップモーダルポップアップにGoogleマップが表示されない

Question

地図がブートストラップモーダルポップアップに表示されません。

モーダルポップアップが空白ページで表示され、その中にマップを表示する方法。私はすべてのスクリプトファイルとCSSファイルを追加しました。私を助けてください！

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

すべての最初の要素からonclickのattrを削除します。

loadMapメソッドは1回だけ実行する必要があります。これはshown.bs.modalイベントから実行されます。

しかし、このイベント関数は、引数としてlat & lonを引数にとりません。

データは、いくつかの要素の属性として例えば、map_canvas DIV lat & lonを追加します。

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

：次に、このような shown.bs.modalイベントでこれらの値を取得

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

を