我试图插入一个谷歌地图使用到Twitter的引导模态。 模态示出了本图的形状，但是只显示地图的一部分，其余部分为灰色。 在调整屏幕上的地图总是显示正确，但在错误的地方为中心。
我已经搜查，发现建议，如调用地图的resize事件，或者地图图像的最大宽度设置为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的引导V2.0.4。 我需要一些帮助，因为我没有正确地触发resize事件或编辑，以便谷歌地图是单独留在家中的CSS。
Answer 1:
谷歌地图的确显示“灰色”区域的，当它放在一个动态的元素中（例如：一个调整大小，淡入淡出等）。 你说得对，引发了“调整”功能，它应该被调用一次在动画完成（在shown.bs.modal在引导3事件或shown 的事件在引导2）：
$("#myModal").on("shown.bs.modal", function () {
google.maps.event.trigger(map, "resize");
});
在引导2，你会做什么：
$('#myModal').on('shown', function () {
google.maps.event.trigger(map, "resize");
});
（其中map是地图的变量名（见谷歌地图文档的其他细节），并#myModal从你的元素的ID）。
UPDATE 2018年5月22日
随着地图的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:
对我来说，它的工作原理是这样的（自举3）：
$("#contact-modal").on("shown.bs.modal", function () {
google.maps.event.trigger(map, "resize");
});
Answer 3:
正确地显示在地图上并居中
我想指出我做了，在原有基础上回答了一些修改，以使其与引导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:
当使用引导3，您需要使用什么是他们的文档中提供的即代替“显示”使用“shown.bs.modal”
例：
$('#modal').on('shown.bs.modal', function () {
initialiseMap();
});
Answer 5:
该接受的答案呢，的确，工作在这种情况下div的内容是本地的。 不幸的是，我有表示被列为远程数据的一部分的地图同样的问题。 获取地图的手柄并调用调整大小没有正确中心我的地图。 这里是我固定的问题，在我的远程数据的情况。
包括脚本标记为远程数据的一部分与函数初始化地图
<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:
下面的代码工作完全正常的自举3
$("#mapModal").on("shown.bs.modal", function () {initialize();});
Answer 8:
this works for me
**<!-- Modal -->**
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Google Maps</h4>
</div>
<div class="modal-body">
<div id="map_canvas" style="width:auto; height: 500px;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
**Button**
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">View Map</button>
**javascript**
<script type="text/javascript">
function initializeMap() {
var mapOptions = {
center: new google.maps.LatLng(51.219987, 4.396237),
zoom: 12,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.219987, 4.396237)
});
marker.setMap(map);
}
//show map on modal
$('#myModal').on('shown.bs.modal', function () {
initializeMap();
});
</script>
希望这将有助于
Answer 9:
我有固定用的解决方案：
$('#myId').on('shown.bs.modal', function () {
initializeMap() // with initializeMap function get map.
});
//模态引导事件shown.bs.modal后会显示模式显示，不使用show.bs.modal，因为它会之前的模态显示呼叫。
Answer 10:
试试这个 ！
<div class="modal fade" id="map_modal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body"><div id="map_canvas" style="width:530px; height:300px"></div></div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
var map = marker = new Array();
geocoder = NULL;
function addPoint(location, id, mapId) {
if (!marker[id]) {
marker[id] = new google.maps.Marker({
position: location,
map: map[mapId],
draggable: true
});
}
}
function placeMarker(location, editStr, id) {
if (!marker[id]) {
marker[id] = new google.maps.Marker({
position: location,
map: map[id],
draggable: false
});
}
marker[id].setPosition(location);
map[id].setCenter(location);
$("#longitud").val(location.lat());
$("#latitud").val(location.lng());
}
function initializeMap(id, div_id, lat, lng, editStr) {
if (!geocoder)
geocoder = new google.maps.Geocoder();
if (!map[id]) {
var coordinates = new google.maps.LatLng(lat, lng);
var myOptions = {zoom: 8, center: coordinates, mapTypeId: google.maps.MapTypeId.ROADMAP}
map[id] = new google.maps.Map(document.getElementById(div_id), myOptions);
google.maps.event.addListener(map[id], 'click', function(event) {
placeMarker(event.latLng, editStr, id);
});
placeMarker(coordinates, editStr, id);
}
}
$('#map_modal').on('shown.bs.modal', function(e) {
initializeMap("#newMaps", "map_canvas", 10.444598, -66.9287, "");
})
Answer 11:
我也面临着同样的问题，但我通过等待地图的“空闲”状态（即当它的完成），然后调用大小调整解决这个问题：
google.maps.event.addListenerOnce(map, 'idle', function () {
var currentCenter = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(currentCenter);
map.setZoom(15);
});
后
map = new google.maps.Map(document.getElementById('map-canvas2'),mapOptions);
文章来源: Showing a Google Map in a modal created with Twitter Bootstrap
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://img.manongdao.com/sparkler-677774__340.jpg', '推荐 狗以群分 的文章《显示一个谷歌地图与Twitter的引导创建一个模式(Showing a Google Map in 》','https://www.manongdao.com/article-967141.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}