以使用Twitter Bootstrap创build的模式显示Google地图
我正在尝试使用Twitter Bootstrap将Google地图插入模式。 模态显示出现地图的形状，但只显示地图的一部分，其余显示为灰色。 在调整屏幕大小后，地图始终显示正确，尽pipe居中放置在错误的地方。
我search了一些build议，例如调用地图的resize事件，或者将地图图片的最大宽度设置为none，但是迄今为止这些build议都没有帮助。 看起来地图只是在一个隐藏的元素中，没有find正确的大小。
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。 我需要一些帮助，因为我无法正确触发resize事件或编辑css，因此Google地图被单独留下。
当Google地图放置在dynamic元素中时（例如：resize，淡入淡出等），确实会显示“灰色”区域。 触发“resize”function是正确的，一旦animation完成（Bootstrap 3中的shown.bs.modal事件或Bootstrap 2中shown 事件 ），应该调用它。
$("#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是您的地图的variables名称（请参阅Google Maps文档以获取更多详细信息）， #myModal您的元素中的ID）。
对我来说，它是这样工作的（Boostrap 3）：
$("#contact-modal").on("shown.bs.modal", function () { google.maps.event.trigger(map, "resize"); });
正确显示地图并居中
我想根据原始的答案，指出我做的一些修改，使其与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 });
在这种情况下，我也照顾重新审视地图，基于Jan-Henk对第一个答案的评论中提出的这个问题。
当使用Bootstrap 3时，您需要使用他们的文档中提供的内容，而不是“显示”使用“shown.bs.modal”
例：
$('#modal').on('shown.bs.modal', function () { initialiseMap(); });
在这种情况下，接受的答案确实起作用，其中div的内容是本地的。 不幸的是，我遇到同样的问题，显示一个包含在远程数据中的地图。 获取地图的句柄和调用resize没有正确地居中我的地图。 这里是我如何解决我的远程数据情况的问题。
包含一个脚本标记作为远程数据的一部分，并具有初始化映射的function
<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>
这样，在初始化之前，地图已经在对话框中确定了大小。 希望这会帮助其他类似的情况。
以下代码对于bootstrap 3来说工作得非常好
$("#mapModal").on("shown.bs.modal", function () {initialize();});
被接受的答案摆脱了灰色框，但没有把地图放在正确的坐标上。 我的解决scheme只是等待渲染地图，直到模态完成显示。
$('#modal').on('shown', function () { initialize(); });
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>
希望这会有所帮助
尝试这个 ！
<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, ""); })
我也面临同样的问题，但我通过等待地图的“空闲”状态（即完成时），然后调用resize来解决它：
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);
我已经解决了：
$('#myId').on('shown.bs.modal', function () { initializeMap() // with initializeMap function get map. });
// event.bs.modal on modal bootstrap将在模态显示后显示，不使用show.bs.modal，因为它将在模态显示之前调用。
