Question

所以我正在玩this example，我们公司有自己的谷歌地图API密钥。一个同事，我试图让地图工作 - 全屏显示下面的代码工作 - 我的意思是我们只是让地图缩放浏览器的整个宽度，我们使用的代码是：

<script>
    var map;

    function initialize() {
      var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

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

显然，他们没有API密钥，因为那是在其他地方加载的。

所以我决定加入这个，因为我需要将地图存储在其他地方 - 我添加了这个额外的爵士乐：

<style>
    #map-canvas {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    #Map{
        height: 350px;
    }
</style>

第一个是显而易见的，第二个是jquery-ui标签的一部分，我基本上，对于这个标签，将它的高度设置为350px

继续前进 - 问题是：

如果我让一个人上路，那么我得到：

“近距离和个人”的追踪者看起来全宽和高，但远方向的地图都被打破了......

任何人都知道为什么？

Answer 1

我也有同样的问题，每当我调整Google地图容器的大小时，我的地图的一半都保持灰色（menas：不可用状态）。我通过触发Google地图的 refresh 事件来解决这个问题

google.maps.event.trigger(map, "resize");

仅供参考： 每当您更改Google地图的高度或宽度时，最好触发此调整大小事件。

resize ：当div更改大小时，开发人员应在地图上触发此事件： google.maps.event.trigger(map, 'resize') 。

您还可以查看我的问题here。

希望这能解决你的问题。

Answer 2

好点praveen！即使我有同样的问题！只有在调整div或窗口大小时才需要调用它！在我的情况下，我在渲染地图后调用它。

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

现在我可以看到完整的渲染屏幕!!

Answer 3

DOM准备就绪时使用setTimeout。这是专门针对最初隐藏的地图（就像在模态或弹出窗口中使用地图时一样）。

在jQuery中：

$(document).ready(function(){

setTimeout('initialize()', 2000);

});

谷歌地图api无法正常工作

3 个答案: