Javascript 谷歌地图api不能正常工作

所以我在玩弄，我们公司有自己的谷歌地图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>

var映射；
函数初始化（）{
变量映射选项={
缩放：8，
中心：新google.maps.LatLng（-34.397150.644），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

显然，它们的API键不是API键，因为它在其他地方加载

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

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

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

#地图画布{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
#地图{
高度：350px；
}

第一个是显而易见的，第二个是jQueryUI选项卡的一部分，基本上，对于这个选项卡，我将其高度设置为350px

继续——问题是：

如果我把一个人丢在路上，我会：

“近距离和个人”的跟踪者外观是全宽和全高的，但“遥远的方向”地图都被打破了

---

有人知道为什么吗？

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

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

仅供参考：无论何时更改谷歌地图的高度或宽度，最好触发此调整大小事件

resize

：当div更改大小时，开发人员应在地图上触发此事件：

google.maps.event.trigger（地图，'resize'）

你也可以检查我的问题

希望这能解决您的问题。

好点，praveen！ 甚至我也有同样的问题！ 您不必仅在调整div或窗口大小时调用它！在我的例子中，我在渲染贴图后调用它

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

---

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

在DOM就绪时使用setTimeout。这特别适用于最初隐藏的贴图（如在模式或弹出窗口中使用贴图时）

在jQuery中：

$(document).ready(function(){

setTimeout('initialize()', 2000);

});

---

那么你用什么作为你的地图容器呢<代码>地图画布或

地图

？抱歉，这应该更清楚-

地图画布

-上述代码来自一个部分，该部分呈现在包含div的页面中

地图

最初是否隐藏了“地图”div？它的宽度是如何规定的？看起来在渲染时，该div的API大小为零（这会给出左上角的分幅行为）；它的宽度是自动的。我是否应该将其宽度指定为100%？@geocodezip我将op更新为状态：第二个是jquery ui选项卡的一部分，基本上，对于这个选项卡，我将其高度设置为350px-这描述了地图分区。这不起作用。。。。映射仍然是一样的-我在

google.maps.event.addDomListener（窗口'load'，initialize'）之后调用它如果我在之前调用它，那么地图永远不会显示…仍然什么都没有-如果我让页面加载，那么在控制台中调用它-地图正确显示…@LogicLooking Ok。你能试试这个
google.maps.event.addListenerOnce（map'idle'，function（）{google.maps.event.trigger（map'resize'）；}）
after
google.maps.event.addDomListener（窗口“加载”，初始化）不起作用，另外：
未捕获类型错误：无法读取未定义的
的属性“\uuuuue3\uuuu”现在在控制台中抛出。如果我只是粘贴
google.maps.event.trigger（映射，'resize'）在控制台中-它只是工作…它不应该是对另一个答案的评论吗？是的，但我需要50个声誉来评论：(