Question

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

没有控制台错误。

帮助表示赞赏。

Answer 1

我建议您将脚本重新定位到页面底部，并将样式重新定位到头部。然后将高度，宽度和显示块添加到具有map_canvas标识的div。

https

未填充Google Map JS API iframe

1 个答案: