在使用 Twitter Bootstrap 创建的模式中显示 Google 地图 [英] Showing a Google Map in a modal created with Twitter Bootstrap

问题描述

我正在尝试使用 Twitter Bootstrap 将 Google 地图插入到模态中.模态显示地图的形状，但只显示地图的一部分，其余部分是灰色的.调整屏幕大小后，地图始终正确显示，尽管居中位置错误.

我搜索并找到了一些建议，例如调用地图的调整大小事件，或将地图图像的最大宽度设置为无，但到目前为止这些建议都没有帮助.似乎地图无法确定它的正确大小，只要它位于隐藏的元素中.

JS

function initialize() {var mapOptions = {中心:新的 google.maps.LatLng(51.219987, 4.396237)，缩放:12，mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map(document.getElementById("mapCanvas"),地图选项);var 标记 = 新的 google.maps.Marker({位置:新 google.maps.LatLng(51.219987, 4.396237)});标记.setMap(地图);}

HTML

<div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h3></h3>
<div class="modal-body"><div id="mapCanvas" style="width: 500px; height: 400px"></div>

<div class="modal-footer"><a href="#" class="btn" data-dismiss="modal">关闭</a>

我使用的是 Twitter Bootstrap v2.0.4.我需要一些帮助，因为我无法正确触发调整大小事件或编辑 css 以便让 Google 地图单独存在.

解决方案

Google Maps 确实显示Grey"当它被放置在一个动态元素中时(例如:一个调整大小、淡入淡出等的元素).触发调整大小"是正确的函数，应在动画完成后调用(Bootstrap 3 中的 shown.bs.modal 事件或 shown 事件 在 Bootstrap 2):

$("#myModal").on("shown.bs.modal", function () {google.maps.event.trigger(地图，调整大小")；});

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

$('#myModal').on('shown', function () {google.maps.event.trigger(地图，调整大小")；});

(其中 map 是地图的变量名称(请参阅 Google 地图文档 了解更多详情)，以及 #myModal 元素中的 ID).

更新 2018-05-22

随着 Maps JavaScript API 3.32 版中的新渲染器发布，调整大小事件不再是 Map 类的一部分.

文档说明

<块引用>

调整地图大小时，地图中心固定

• 全屏控件现在保留居中.

• 不再需要手动触发调整大小事件.

来源:https://developers.google.com/maps/documentation/javascript/新渲染器

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

I'm trying to insert a Google map into a modal using Twitter Bootstrap. The modal shows up with the shape of the map present, but only part of the map is displayed, the rest is gray. Upon resizing the screen the map always shows up correctly, although centered in the wrong place.

I've searched and found suggestions such as calling the map's resize event, or setting the max-width of the map image to none, but none of these suggestions have helped so far. It seems like the map is failing to figure out it's correct size as long as it's in an element that's hidden.

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>

I'm using Twitter Bootstrap v2.0.4. I need some help because I'm failing to trigger the resize event correctly or editing the css so that the Google map is left alone.

解决方案

Google Maps indeed displays "Grey" area's when it's placed inside a dynamic element (for example: One that resizes, fades etc.). You're right about triggering the "resize" function, which should be called once the animation is complete (the shown.bs.modal event in Bootstrap 3 or the shown event in Bootstrap 2):

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

In Bootstrap 2, you will do:

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

(where map is the variable name of your map (see Google Maps documentation for further details), and #myModal the ID from your element).

UPDATE 2018-05-22

With a new renderer release in version 3.32 of Maps JavaScript API the resize event is no longer a part of Map class.

The documentation states

When the map is resized, the map center is fixed

• The full-screen control now preserves center.

• There is no longer any need to trigger the resize event manually.

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

google.maps.event.trigger(map, "resize"); doesn't have any effect starting from version 3.32

这篇关于在使用 Twitter Bootstrap 创建的模式中显示 Google 地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！