远程引导模式与谷歌地图

Remote Bootstrap Modal with Google Maps

本文关键字：谷歌地图 模式 程引导      更新时间：2023-09-26

我有麻烦加载一个Ajax模式与谷歌地图在它。它所显示的只是模态中的灰色轮廓。我知道谷歌地图API在那里，因为它在模态之外工作。如有任何帮助，我将不胜感激。

Index Page Javascript 

$('.update').click(function(e) {
     $('body').modalmanager('loading');
     $("#ajax-modal-1").load('detail.php', '', function(){
          $("#ajax-modal-1").modal().addClass('modal-big');
     });
});

模态HTML 

...
<div class="row">
    <div class="col-sm-12">
        <div class="gmap" id="gmap"></div>
    </div>
</div>
...

模态Javascript 

...
$('body').on('show.bs.modal', '#ajax-modal-1', function () {
    google.maps.event.addDomListener(window, 'load', initialize);
});
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8
    };
    var map = new google.maps.Map(document.getElementById("gmap"),
        mapOptions);
}
...

在Modal Javascript中尝试以下操作:

var map;        
var location = new google.maps.LatLng(-34.397, 150.644);
var marker = new google.maps.Marker({ position : location });
function initialize() {
  var mapOptions = { ... };
  map = new google.maps.Map(document.getElementById("gmap"), mapOptions);
  marker.setMap(map);
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  }); 
};
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", resizingMap());
$('#ajax-modal-1').on('show.bs.modal', function() {
   resizeMap();
})
function resizeMap() {
   if(typeof map =="undefined") return;
   setTimeout( function(){resizingMap();} , 400);
}
function resizingMap() {
   if(typeof map =="undefined") return;
   var center = map.getCenter();
   google.maps.event.trigger(map, "resize");
   map.setCenter(center); 
}
HTML: 

<a href="#ajax-modal-1" class="btn" data-toggle="modal">Launch Modal</a>
<div class="modal fade" id="ajax-modal-1">
    ...
    <div id="gmap"></div>
    ...
</div>
相关文章：