google map в bootstrap modal не работает должным образом

Question

Я пытаюсь показать карту google в bootstrap modal в течение нескольких дней, я искал все ответы здесь, обсуждая эту тему, но до сих пор для меня ничего не работало. Я понимаю, что я должен использовать триггер изменения размера после того, как модаль открыт, и я действительно использовал его, но ничего не работает для меня, и это очень расстраивает. Помощь PLS!

здесь код я использовал:

<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
var map; 
myLatlng = new google.maps.LatLng(32.0260053,34.8987034); 
function initialize() { 
    var myOptions = { 
     zoom: 14, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
           myOptions);   
    $('.myMapModal').on('show.bs.modal', function() { 

     google.maps.event.trigger(map, 'resize'); 
     return map.setCenter(myLatlng); 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

HTML-:

<div class="modal myMapModal fade" id="myMapModal" > 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title" id="myModalLabel">#f16#</h4> 
       </div> 
       <div class="modal-body map-modal"> 
        <div class="container"> 
         <div class="row"> 
          <div id="map-canvas" style="width: 500px; height: 480px;"></div> 
         </div> 
        </div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">סגירה</button> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

Проверьте это: JSFiddle может служить вам

$("#myMapModal").ready(function() { 
    $(window).resize(function() { 
     google.maps.event.trigger(map, 'resize'); 
    }); 
    $('#myMapModal').modal('show'); 
    google.maps.event.trigger(map, 'resize'); 
    return map.setCenter(myLatlng); 
}); 

Answer 2

Я получил его со следующим: может помочь другим.

BootstrapDialog.show({ 
      title: 'Point on Map', 
      message: ''<div id="selction_map"></div>'', 
      onshown: function(dialogRef){ 
       initMap(); 
      } 
     }); 

https://nakupanda.github.io/bootstrap3-dialog/