谷歌地图模式问题

2022-01-17 00:00:00 google-maps modal-dialog jquery javascript twitter-bootstrap

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

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

我什至尝试了这种解决方法，删除绑定地图的整个 div 并重新生成它，但这个技巧不起作用，请告诉我如何解决我的问题.

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.

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

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


}

请帮助，

谢谢

推荐答案

我也遇到了同样的问题.但我发现模态显示事件存在问题.因为它不适用于某些版本的问题，所以我只是按照引导模式文档来实现它.

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 问题解决方案:

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.

相关文章