Question

我在加载带有Google Map的Ajax Modal时遇到问题。它显示的是模态中的灰色轮廓。我知道Google Maps API就在那里，因为它在模态之外工作。任何帮助都会很感激。

索引页面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);
}
...

Answer 1

在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>

使用Google地图进行远程Bootstrap模式

1 个答案: