在使用Twitter Bootstrap创建的模式中显示Google地图

Question

我正在尝试使用Twitter Bootstrap将Google地图插入模式.模态显示当前地图的形状,但仅显示地图的一部分,其余为灰色.调整屏幕大小后,地图始终显示正确,但位于错误的位置.

我搜索并找到了一些建议,例如调用地图的resize事件,或者将地图图像的max-width设置为none,但这些建议都没有帮助到目前为止.似乎地图无法确定它的正确大小,只要它隐藏在一个元素中即可.

JS

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(51.219987, 4.396237),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapCanvas"),
    mapOptions);
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.219987, 4.396237)
  });
  marker.setMap(map);
}

HTML

<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3></h3>
  </div>
  <div class="modal-body">
    <div id="mapCanvas" style="width: 500px; height: 400px"></div>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
  </div>
</div>

我正在使用Twitter Bootstrap v2.0.4.我需要一些帮助,因为我没有正确触发调整大小事件或编辑css,因此谷歌地图是独立的.

Answer 1

当谷歌地图放置在动态元素内时,它确实显示"灰色"区域(例如:一个调整大小,淡化等的区域).你是否正确触发"调整大小"功能,应该在动画完成后调用(shown.bs.modalBootstrap 3中的shown 事件或Bootstrap 2中的事件):

$("#myModal").on("shown.bs.modal", function () {
    google.maps.event.trigger(map, "resize");
});

在Bootstrap 2中,您将执行以下操作:

$('#myModal').on('shown', function () {
    google.maps.event.trigger(map, "resize");
});

(map地图的变量名称在哪里(有关详细信息,请参阅Google Maps文档),以及#myModal元素中的ID).

更新2018-05-22

使用Maps JavaScript API版本3.32中的新渲染器版本,resize事件不再是Map类的一部分.

文件说明

调整地图大小后,地图中心将固定

• 全屏控制现在保留了中心.

• 不再需要手动触发resize事件.

来源:https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); 从版本3.32开始没有任何影响

Answer 2

对我来说,它就像这样(Boostrap 3):

$("#contact-modal").on("shown.bs.modal", function () {
    google.maps.event.trigger(map, "resize");
});

Answer 3

正确显示地图并居中

我想根据原始答案指出我做的一些修改,以使其与Bootstrap 3一起使用(检查模态使用情况).

// Resize map to show on a Bootstrap's modal
$('#map-modal').on('shown.bs.modal', function() {
  var currentCenter = map.getCenter();  // Get current center before resizing
  google.maps.event.trigger(map, "resize");
  map.setCenter(currentCenter); // Re-set previous center
});

在这种情况下,我也借此recentering地图上的照顾,基于这个问题年1 -亨克的第一应答意见建议.

Answer 4

使用Bootstrap 3时,您需要使用其文档中提供的内容,而不是"显示"使用'shown.bs.modal'

例:

 $('#modal').on('shown.bs.modal', function () { 
     initialiseMap();
 });

Answer 5

事实上,接受的答案确实适用于div的内容是本地的情况.不幸的是,我遇到了同样的问题,显示了一个包含在远程数据中的地图.获取地图的句柄并调用resize并没有正确地将我的地图居中.以下是我在远程数据情况下修复问题的方法.

包含脚本标记作为远程数据的一部分,并具有初始化地图的功能

<script type="text/javascript">
    function renderMap() {
        var point = new google.maps.LatLng(51.219987, 4.396237);
        var map = new google.maps.Map(document.getElementById('map'), {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoom: 13,
            center: point
        });
        var marker = new google.maps.Marker({ position: point, map: map, icon: 'http://www.google.com/intl/en_us/mapfiles/ms/icons/red-dot.png' });
    }
</script>

在主页面上显示的对话框的事件中调用该函数

<script type="text/javascript">

    $(document).ready(function () {
        $('#dlgReportInfo').on('shown', function () {
            renderMap();
        });
    })
</script>

这样,在初始化之前,地图已在对话框中调整大小.希望这可以帮助其他类似情况的人.

Answer 6

接受的答案摆脱了灰色方框,但并没有将地图置于正确的坐标中心.我的解决方案是等待渲染地图,直到模态完成显示.

$('#modal').on('shown', function () {
    initialize();
});

Answer 7

以下代码适用于bootstrap 3

$("#mapModal").on("shown.bs.modal", function () {initialize();});