如何在隐藏元素中加载Google地图

Question

如何在隐藏元素中加载Google地图

127

我的页面中有一个嵌套在隐藏的 div 中的 Google 地图。我点击链接后显示该 div，但是只有地图的左上角显示出来。

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

map0.onResize();

或者：

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

我该怎么做？

这是一个显示了隐藏地图的div后所看到的图片：

Alt text

- leora

@Matt Ball - 我已经让它工作了。在创建谷歌地图对象后，我将其存储在全局变量中，以便稍后可以引用它，并且现在调用resize似乎起作用了。我正在尝试避免每次显示地图时都重新创建地图对象，因为我允许人们来回切换。 - leora

@ooo，使用下面的代码非常简单。你只需要添加一个if条件来检查地图对象是否已经初始化即可。这是一个即兴编写的代码，旨在解决您最初的问题，即正确加载地图。 - Philar

@philar - 是的，谢谢你。这样我就可以点赞了 :). 无论如何，我需要将变量存储在全局级别，以避免重新初始化。 - leora

在下面的代码中，由于未在“初始化”函数内声明，所以map对象隐式成为全局变量。 - Philar

23个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Balibrera · Answer 1

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

<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。

- Andrew · Answer 2

在显示地图时，我正在进行地址编码，然后设置地图的中心。 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());
        });
    }
});

- user6414609 · Answer 3

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>