代码之家 › 专栏 › 技术社区 › Steve

未填充Google Map JS API iframe

google-maps-api-3

Steve · 技术社区 · 7 年前

从 this answer ,我使用了以下代码 this page :

<style type="text/css">
    html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB6ElZHhJNP-A9LkwwDvVNqvCH_W3kICjk"></script>
<script type="text/javascript">
    var map;
    var grayStyles = [
    {
        featureType: "all",
        stylers: [
        { saturation: -90 },
        { lightness: 50 }
        ]
    },
    ];
    var mapOptions = {
    center: new google.maps.LatLng(-31.947414, 115.835933),
    zoom: 15,
    styles: grayStyles,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    function initialize() {
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>

(我添加了我们的api密钥)

上面页面右下角的输出包含:

<iframe frameborder="0" style="z-index: -1; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; border: none;" src="about:blank">
  #document
  <html>
    <head></head>
    <body></body>
  </html>
</iframe>

没有控制台错误。

感谢帮助。

1 回复 | 直到 7 年前

Steven Anthony 7 年前

我建议您将脚本重新定位到页面底部,将样式重新定位到页眉。然后将高度、宽度和显示块添加到ID为Map_Canvas的div。

<div id="map_canvas" style="position: relative; overflow: hidden; display: block; height: 500px; width: 100%;"></div>

推荐文章

Jason Steve · HTML5地理位置信息窗口不工作

7 年前

Drew LeSueur · 谷歌地图JavaScript街景错误

7 年前

Valachio · Google Maps API-向数据层中的点添加任意数据

7 年前

samvdst · Google Maps JavaScript API V3-显示多条路线[重复]

7 年前

Valuator · 在平移或移动之前,地图数据不会填充整个地图元素

7 年前

Andy · 如何在Google Maps API上禁用箭头键平移

7 年前

Bhumesh Purohit · 受限Google API密钥在反向地理编码中不起作用

7 年前

Mizlul · 我可以在我的项目中使用并在ios和android上工作的最可靠的react本机地图库是什么

7 年前

jemz · 自定义图像图标未定位

7 年前

CodingGrandma · 仅打开一种地图类型的Google Fusion表/删除某些地图类型的Google Fusion表

7 年前