如何处理隐藏div内的谷歌地图（更新图片）

时间：2010-10-31 17:48:04

标签： jquery google-maps google-maps-api-3

我有一个页面，谷歌地图首先在隐藏的div中。然后我点击链接后显示div，但只显示地图的左上角。

我尝试在点击后运行此代码：

    map0.onResize();

或：

  google.maps.event.trigger(map0, 'resize')

任何想法。这是我在显示带有隐藏地图的div之后看到的图像。alt text

23 个答案:

答案 0 :(得分：125)

我遇到了同样的问题并发现在显示div时，请致电google.maps.event.trigger(map, 'resize');，这似乎可以解决我的问题。

答案 1 :(得分：103)

我自己测试过，这就是我接近它的方式。非常直截了当，如果您需要任何澄清，请告诉我

HTML 

<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" ></div>
<button onclick="displayMap()">Show Map</button>

CSS 

<style type="text/css">
#map_canvas {display:none;}
</style>

的Javascript 

<script>
function displayMap()
{
    document.getElementById( 'map_canvas' ).style.display = "block";
    initialize();
}
function initialize()
{
    // create the map
    var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng( 0.0, 0.0 ),
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map( document.getElementById( "map_canvas" ),myOptions );
}
</script>

答案 2 :(得分：26)

google.maps.event.trigger($("#div_ID")[0], 'resize');

如果您没有可用的变量映射，它应该是包含GMAP的div中的第一个元素（除非您做了一些愚蠢的事情）。

答案 3 :(得分：13)

我在Bootstrap选项卡中有一个Google地图，但没有正确显示。这是我的修复。

// Previously stored my map object(s) in googleMaps array

$('a[href="#profileTab"]').on('shown', function() {   // When tab is displayed...
    var map = googleMaps[0],
        center = map.getCenter();
    google.maps.event.trigger(map, 'resize');         // fixes map display
    map.setCenter(center);                            // centers map correctly
});

答案 4 :(得分：7)

如何在调整div的大小时刷新地图

仅仅拨打google.maps.event.trigger(map, 'resize');还不够。您还应该重置地图的中心。

var map;

var initialize= function (){
    ...
}

var resize = function () {
    if (typeof(map) == "undefined") {) {
        // initialize the map. You only need this if you may not have initialized your map when resize() is called.
        initialize();
    } else {
        // okay, we've got a map and we need to resize it
        var center = map.getCenter();
        google.maps.event.trigger(map, 'resize');
        map.setCenter(center);
    }
}

如何收听调整大小事件

Angular（ng-show或ui-bootstrap崩溃）

直接绑定到元素的可见性而不是绑定到ng-show的值，因为$ watch可以在ng-show更新之前触发（因此div仍然是不可见的）。

scope.$watch(function () { return element.is(':visible'); },
    function () {
        resize();
    }
);

jQuery .show（）

使用内置回调

$("#myMapDiv").show(speed, function() { resize(); });

Bootstrap 3 Modal 

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

答案 5 :(得分：5)

如果您通过复制/粘贴iframe代码插入Google地图并且您不想使用Google Maps API ，则这是一个简单的解决方案。只需在显示隐藏地图时执行以下javascript行。它只需要iframe HTML代码并将其插入到同一个地方，然后再次呈现：

document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML;

jQuery版本：

$('#map-wrapper').html( $('#map-wrapper').html() );

HTML：

....
<div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div>
....

以下示例适用于最初隐藏在Bootstrap 3选项卡中的地图：

<script>
$(document).ready( function() {

    /* Detects when the tab is selected */
    $('a[href="#tab-id"]').on('shown.bs.tab', function() {

        /* When the tab is shown the content of the wrapper
           is regenerated and reloaded */

        $('#map-wrapper').html( $('#map-wrapper').html() ); 

    });
});
</script>

答案 6 :(得分：5)

也可以触发本机窗口调整大小事件。

Google地图会自动重新加载：

window.dispatchEvent(new Event('resize'));

答案 7 :(得分：5)

我有同样的问题，google.maps.event.trigger(map, 'resize')对我不起作用。

我做的是在看到div ...

之后放一个计时器来更新地图 
//CODE WORKING

var refreshIntervalId;

function showMap() {
    document.getElementById('divMap').style.display = '';
    refreshIntervalId = setInterval(function () { updateMapTimer() }, 300);
}

function updateMapTimer() {
    clearInterval(refreshIntervalId);
    var map = new google.maps.Map(....
    ....
}

我不知道这是否更方便，但它有效！

答案 8 :(得分：4)

使用jQuery你可以做这样的事情。这有助于我在Umbraco CMS中的一个标签上加载谷歌地图，该标签不会立即显示。

function waitForVisibleMapElement() {
    setTimeout(function () {
        if ($('#map_canvas').is(":visible")) {
            // Initialize your Google Map here
        } else {
            waitForVisibleMapElement();
        };
    }, 100);
};

waitForVisibleMapElement();

答案 9 :(得分：3)

如果您使用gmaps.js，请致电：

map.refresh();

显示你的div。

答案 10 :(得分：3)

我的解决方案非常简单有效：

的 HTML 

<div class="map-wrap"> 
  <div id="map-canvas"></div>
</div>


的 CSS 

.map-wrap{
  height:0;
  width:0;
  overflow:hidden;
}


的 Jquery的 

$('.map-wrap').css({ height: 'auto', width: 'auto' }); //For showing your map
$('.map-wrap').css({ height: 0, width: 0 }); //For hiding your map

答案 11 :(得分：2)

我发现这对我有用：

隐藏：

$('.mapWrapper')
.css({
  visibility: 'hidden',
  height: 0
});

显示：

    $('.mapWrapper').css({
      visibility: 'visible',
      height: 'auto'
    });

答案 12 :(得分：2)

如果在Bootstrap v3选项卡中使用，则以下内容应该有效：

$('a[href="#tab-location"]').on('shown.bs.tab', function(e){
    var center = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(center);
});

其中tab-location是包含地图的标签的ID。

答案 13 :(得分：2)

正如John Doppelmann和HoffZ所指出的那样，将所有代码放在你的div显示函数或onclick事件中如下所示：

setTimeout(function(){
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});

它对我来说很完美

答案 14 :(得分：2)

我想最初的问题是在地图中隐藏的div中的地图。我解决了类似的问题，通过在初始化文档就绪后调整隐藏div中的地图，无论其显示状态如何。在我的例子中，我有两个地图，一个被显示，一个被初始化时被隐藏，我不想在每次显示时初始化地图。这是一个老帖子，但我希望它可以帮助任何正在寻找的人。

答案 15 :(得分：0)

我的解决方案是：

<强> CSS： 

.map {
   height: 400px;
   border: #ccc solid 1px;
}

<强> jQuery的： 

$('.map').width(555); // width of map canvas

答案 16 :(得分：0)

我不喜欢只有在隐藏的div变得可见之后才会加载地图。例如，在旋转木马中，这不起作用。

我的解决方法是将隐藏元素添加到隐藏元素中，然后用绝对位置隐藏它，然后渲染地图，并在地图加载后删除该类。

在Bootstrap Carousel中测试。

HTML

<div class="item loading"><div id="map-canvas"></div></div>

CSS 

.loading { display: block; position: absolute; }

JS 

$(document).ready(function(){
    // render map //
    google.maps.event.addListenerOnce(map, 'idle', function(){
        $('.loading').removeClass('loading');
    });
}

答案 17 :(得分：0)

当您想要显示地图时，请使用以下代码行。

               $("#map_view").show("slow"); // use id of div which you want to show.
                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
                    document.body.appendChild(script);

答案 18 :(得分：0)

 $("#map_view").show("slow"); // use id of div which you want to show.
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
     document.body.appendChild(script);

答案 19 :(得分：0)

第一篇文章。在点击标签之前，我的googleMap div位于带有{display：none}的容器div中。和OP有同样的问题。这对我有用：

google.maps.event.addDomListener(window, 'load', setTimeout(initialize, 1));

将代码粘贴到代码的内部和末尾，单击容器div选项卡并显示隐藏的div。重要的是，在调用initialize之前必须显示容器div。

我尝试了这里提出的一些解决方案和其他页面，但它们对我不起作用。如果这对您有用，请告诉我。感谢。

答案 20 :(得分：0)

在div之前添加此代码或将其传递给js文件：

<script>
    $(document).on("pageshow","#div_name",function(){
       initialize();
    });

   function initialize() {
   // create the map

      var myOptions = {
         zoom: 14,
         center: new google.maps.LatLng(0.0, 0.0),
         mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("div_name"), myOptions);
   }


</script>

此事件将在div加载后触发，因此它将刷新地图内容而无需按F5

答案 21 :(得分：0)

在显示地图时，我正在对地址进行地理编码，然后设置地图中心。 google.maps.event.trigger(map, 'resize');对我不起作用。

我必须使用map.setZoom(14);

以下代码：

document.getElementById('map').style.display = 'block';
var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': input.value }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker2 = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                map.setZoom(14);
                marker2.addListener('dragend', function (event) {
                    $('#lat').val(event.latLng.lat());
                    $('#lng').val(event.latLng.lng());
                });

            }
        });

答案 22 :(得分：-1)

function init_map() {
  var myOptions = {
    zoom: 16,
    center: new google.maps.LatLng(0.0, 0.0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
  marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(0.0, 0.0)
  });
  infowindow = new google.maps.InfoWindow({
    content: 'content'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
  infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);

jQuery(window).resize(function() {
  init_map();
});
jQuery('.open-map').on('click', function() {
  init_map();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>

<button type="button" class="open-map"></button>
<div style='overflow:hidden;height:250px;width:100%;'>
  <div id='gmap_canvas' style='height:250px;width:100%;'></div>
</div>

相关问题
最新问题