谷歌地图模式问题

Question

我试图将谷歌地图显示到Twitter引导模式.当用户第一次点击按钮Show map然后他能够成功地看到地图,因为我正在生成地图onclick()功能但是当他关闭模态并重新打开它时,地图没有正确显示,并且地图的90%部分变为灰色,如下所示

我甚至尝试这个解决方法,删除地图绑定并重新生成它的整个div,但这个技巧不太好用,让我知道如何解决我的问题.

以下是我的js函数,我正在调用show map的事件

function mapp()
{

//google.maps.event.trigger(map, "resize");
  //$("#map_google_canvas").empty();
$("#map_google_canvas").remove();

$("#crmap").append("<div id='map_google_canvas'></div>")


    var myOptions = {
        center: new google.maps.LatLng(54, -2),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_google_canvas"), myOptions);

        var addressArray = new Array("London, United Kingdom", "London Road, Brentwood, United Kingdom", "Brentwood, United Kingdom");


    var geocoder = new google.maps.Geocoder();

    var markerBounds = new google.maps.LatLngBounds();

    for (var i = 0; i < addressArray.length; i++) {
        geocoder.geocode({
            'address': addressArray[i]
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                markerBounds.extend(results[0].geometry.location);
                map.fitBounds(markerBounds);
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }


}

请帮助,

谢谢

Answer 1

我遇到过同样的问题.但我发现了模态显示事件的问题.因为它没有使用某些版本的问题所以我只是按照引导模式文档来实现它.

Bootstrap模态映射问题解决方案:

$(document).ready(function(){
  $('#locationMap').on('shown.bs.modal', function(){
    google.maps.event.trigger(map, 'resize');
    map.setCenter(new google.maps.LatLng(-33.8688, 151.2195));
  });
});

最后这对我有用,对某人有帮助.

Answer 2

由于您正在将地图加载到尚未定义的宽度元素中，因此您有这个解决方案。

使用 latlong 初始化地图后，您应该在 google.maps 上触发调整大小事件

$('.modal').on('shown', function () {
  // also redefine center
  map.setCenter(new google.maps.LatLng(54, -2));
  google.maps.event.trigger(map, 'resize');
})