Google maps 以Twitter引导创建的模式显示Google地图

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

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

JS

函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（51.219987,4.396237），
缩放：12，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“mapCanvas”），
地图选项）；
var marker=new google.maps.marker({
位置：新google.maps.LatLng（51.219987,4.396237）
});
marker.setMap（map）；
}

HTML

×

---

我正在使用Twitter引导v2.0.4。我需要一些帮助，因为我无法正确触发调整大小事件或编辑css以使Google地图不受影响。

当Google地图放置在动态元素（例如：调整大小、淡入淡出等）中时，它确实会显示“灰色”区域。触发“调整大小”功能是正确的，动画完成后应调用该功能（引导3中的

show.bs.modal

事件或引导2中的

show

）：

在引导程序2中，您将执行以下操作：

$（'#myModal'）。on（'显示'，函数（）{
google.maps.event.trigger（map，“resize”）；
});

（其中，

map

是映射的变量名（有关更多详细信息，请参阅），

#myModal

元素的ID）

更新2018-05-22

使用Maps JavaScript API 3.32版中的新渲染器版本，调整大小事件不再是

Map

类的一部分

文件说明

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

• 全屏控件现在保留中心

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

资料来源：

---

google.maps.event.trigger（映射，“调整大小”）

从3.32版开始没有任何效果，在这种情况下，如果div的内容是本地的，那么接受的答案确实有效。不幸的是，我在显示作为远程数据一部分包含的地图时遇到了同样的问题。获取地图句柄并调用resize没有正确地将我的地图居中。下面是我如何解决远程数据情况下的问题

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

函数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，
缩放：13，
中心：点
});
var marker=new google.maps.marker（{位置：点，地图：地图，图标：'http://www.google.com/intl/en_us/mapfiles/ms/icons/red-dot.png' });
}

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

$（文档）.ready（函数（）{
$（'#dlgReportInfo'）。on（'显示'，函数（）{
renderMap（）；
});
})

---

这样，在初始化地图之前，该地图已在对话框中调整大小。希望这能帮助其他类似情况的人。

被接受的答案去掉了灰色框，但没有将地图居中于正确的坐标。我的解决方案是等待渲染贴图，直到模式完成显示

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

正确显示地图并居中显示 我想指出我在原始答案的基础上所做的一些修改，以使它能够与Bootstrap3一起工作（检查一下）

---

在本例中，我还负责根据Jan Henk对第一个答案的评论中的建议重新居中地图。

对我来说，它的工作原理如下（Boostrap 3）：

---

使用Bootstrap 3时，您需要使用其文档中提供的内容，即使用“show.bs.modal”代替“show”

例如：

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

试试这个

<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">&times;</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 -->

---

我也面临同样的问题，但我通过等待贴图的“空闲”状态（即，当它完成时）然后调用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);

---

下面的代码对于Bootstrap3非常有效

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

这对我有用
****
&时代；
谷歌地图
接近
**钮扣**
视图地图
**javascript**
函数初始化映射（）{
变量映射选项={
中心：新google.maps.LatLng（51.219987,4.396237），
缩放：12，
mapTypeId:google.maps.mapTypeId.HYBRID
};
var map=new google.maps.map（document.getElementById（“map_canvas”），
地图选项）；
var marker=new google.maps.marker({
位置：新google.maps.LatLng（51.219987,4.396237）
});
marker.setMap（map）；
}
//在modal上显示地图
$（'#myModal'）.on（'show.bs.modal'，function（）{
初始化映射（）；
});

---

希望这会有所帮助

我已经用解决方案修复了：

$('#myId').on('shown.bs.modal', function () { 
    initializeMap() // with initializeMap function get map.
});

---

//模式引导上的事件show.bs.modal将在模式显示之后显示，而不使用show.bs.modal，因为它将在模式显示之前调用。

您何时调用

initialize（）

方法？可能只在

显示的
事件之后才尝试调用它。它是在函数体的onLoad事件中调用的
<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">&times;</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, "");
                    })

 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);

$("#mapModal").on("shown.bs.modal", 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">&times;</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>

$('#myId').on('shown.bs.modal', function () { 
    initializeMap() // with initializeMap function get map.
});