Google地图模式问题 [英] Google map modal issue

问题描述

我试图将Google地图显示到Twitter引导模式中。
当用户第一次点击按钮显示地图时，他能够成功地看到地图，因为我正在生成地图 onclick（） 函数，但是当他关闭模式并重新打开它时，地图不能正确显示，并且地图的90％部分变成灰色，如下所示： $ b

< img src =https://i.stack.imgur.com/xgXEF.pngalt =我还尝试了这种解决方法：删除整个地图绑定并重新生成它的div，但是这个技巧不会太好用，让我知道我该如何解决我的问题。

以下是我的js函数我正在调用显示地图的onclick事件

 函数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不成功：+ status; 
} 
}）; 
} 
 
 
} 
  

请帮忙，

谢谢

解决方案

我有同样的问题。但我发现模态显示事件的问题。因为它不适用于某些版本的问题，所以我只是按照bootstrap模式文档来实现它。

Bootstrap模式映射问题解决方案：
$（'＃locationMap'）。on（'shown.bs.modal'，function，

  $（document）.ready （）{
 google.maps.event.trigger（map，'resize'）; 
 map.setCenter（new google.maps.LatLng（-33.8688,151.2195））; 
}） ; 
}）; 
  

最后这对我有用，它可以帮助别人。

I am trying to display google map into the Twitter bootstrap modal. When user first click on the button Show map then he is able to see the map successfuly as i am generating the map onclick() function but when he closes the modal and reopen it then the map doesnot show properly and 90% part of the map goes grey like following

I even try this workaround that remove that whole div in which the map is bind and regenerate it but that trick doesnot work too kindly let me know how can i resolve my issue.

Following is my js function which i am calling onclick event of 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);
            }
        });
    }


}

Kindly help,

Thanks

解决方案

I had the same issue. but I found an issue with modal shown event. as its not working with some version of issue so I just follow the bootstrap modal documentation to achieve it.

Bootstrap Modal Map Issue Solution :

$(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));
  });
});

Finally This works for me, It could help to someone.

这篇关于Google地图模式问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！