如何处理隐藏 div 内的谷歌地图(更新图片) [英] how to deal with google map inside of a hidden div (Updated picture)

问题描述

我有一个页面，谷歌地图起初在一个隐藏的 div 中.然后我在单击链接后显示 div，但只显示地图的左上角.

i have a page and a google map is inside a hidden div at first. I then show the div after i click a link but only the top left of the map shows up.

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

i tried having this code run after the click:

    map0.onResize();

或:

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

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

any ideas. here is an image of what i see after showing the div with the hidden map in it.

推荐答案

我自己刚刚测试过，下面是我的方法.非常直接，如果您需要任何说明，请告诉我

Just tested it myself and here's how I approached it. Pretty straight forward, let me know if you need any clarification

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>

这篇关于如何处理隐藏 div 内的谷歌地图(更新图片)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！