谷歌地图模式问题(Google map modal issue)

我想显示谷歌地图到Twitter的引导模式。 当用户第一次单击该按钮上Show map ，然后他能够看到successfuly为我生成的地图的地图onclick()函数，但是当他关闭模式并重新打开它，然后在地图多年平均值显示正常，90％的地图的一部分那张灰色像以下

我甚至尝试这种解决方法是删除整个DIV在地图上被绑定，并重新生成它，但是招亘古不变的工作也请让我知道我可以解决我的问题。

下面是我打电话显示地图的onclick事件我的js函数

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:

我遇到过同样的问题。 但我发现模式显示事件的问题。 其与某些版本的发行工作，所以我只要按照引导模式文档来实现它。

引导模态地图问题解决方案：

$(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:

我与角工作，什么刚刚为我工作，在ui.bootstrap.collapse AngularUI指令是使用超时。 该指令有相同的问题，因为模态，因为没有定义映射大小，直到新的观点是完全负载，并且在地图上显示与灰色区。 我所做的就是这个代码添加到打开的折叠内容的按钮。 也许你可以使其适应你的情况与打开的模式按钮。

window.setTimeout(function () {
    google.maps.event.trigger(map, 'resize')
}, 0);

希望能帮助到你。

Answer 3:

如果使用的是引导3，你必须这样做：

function showMap() {
        var mapOptions = {
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
            mapOptions);
        $('#mapmodal').on('shown.bs.modal', function () {
              google.maps.event.trigger(map, 'resize');
              map.setCenter(new google.maps.LatLng(54, -2));
            });
        $('#mapmodal').modal("show");
}

另外，还要确保你没有设置任何最大宽度或最大高度值IMG - 标签。 如果你这样做在你的CSS样式表把这个在它的结束：

#map img{
    max-width:none;
    max-height:none;
}

我不Quiete酒店不确定是否这里有必要，但设定一个高度值到div牵着你的地图应该是一件好事：

<div id="map" style="height:400px"></div>

我组装这几个计算器的讨论。

Answer 4:

如果您使用的角度，你应该使用$超时 ，而不是setTimeout的 。 包装与设置为0 $超时功能将确保当前执行上下文完成后执行包装的函数。 在你的情况谷歌地图API将只重绘地图后模式并保持地图的元素都完全呈现。 你不会看到任何灰色地带。

$timeout(function () {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(new google.maps.LatLng(53.5085011, -6.2154598););
}, 0);

Answer 5:

该visibility:hidden和visibility:visible ，可以用来代替display:none和display:block 。 这为我工作。 你甚至可以编辑模式此的CSS。

Answer 6:

因为要装载在非尚未定义的宽度元件地图你有这样的解决方案。

后经纬度初始化地图，您应该触发google.maps resize事件

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

Answer 7:

我解决了这个问题，感谢user1012181答案。 我还亲自喜欢这个纯CSS的解决方案。

div#myModalMap.modal.fade.in{    
    visibility: visible;
}

div#myModalMap.modal.fade{
    display: block;
    visibility: hidden;
}

Answer 8:

我也有过这样的问题，与此简单的解决方案上来。

等到你的模式是完全加载，然后设置地图功能的超时事件。

$('#MyModal').on('loaded.bs.modal',function(e){
   setTimeOut(GoogleMap,500);
});

我非常肯定它会在所有情况下工作了。

Answer 9:

我会用uiGmapIsReady等待DOM已准备就绪，然后迫使地图大小调整：

 uiGmapIsReady.promise().then(function () { var map = $scope.map.control.getGMap(); google.maps.event.trigger(map, 'resize'); }); 

Answer 10:

嗯，这是上面的答案是如何帮助，但我不得不使用调用主函数onclick 。

<span data-target="#enlargeModal"data-toggle="modal" onclick="newMap()" class="fa fa-expand r"></span>

function newMap()

{

功能showMap（）{

//your map function

}

    $('#enlargeModal').on('shown.bs.modal', function () {
          var center = fullmap.getCenter();
          google.maps.event.trigger(fullmap, 'resize');
          fullmap.setCenter(center);
    });

显示地图（）; }

文章来源: Google map modal issue