Question

我试图通过GM Api显示一个简单的地图，并且出于某种原因，当加载html＆＃34; map_canvas＆＃34; div被设置为隐藏。这是代码：

configureView

我已经说出了＃34; map test＆＃34;测试可见性。有什么想法??

由于

Answer 1

尝试将脚本放在</body>之前和div#map_canvas之后。

在你的代码中，当调用脚本时，id＆＃34; map_canvas＆＃34;不存在。

<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?" type="text/javascript"></script>
</head>
<body>
body test
<div id="map_canvas">map test</div>
<script type="text/javascript">
        var mapOptions = {
          center: new google.maps.LatLng(-33.45, -70.66667),
          zoom: 11,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        jQuery(document).ready(function(){
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        });

</script> 
</body>
</html>

您还需要使用API密钥（＆＃34; YOUR_KEY＆＃34;），并使用回调调用函数。例如，在我的网站上：

<!-- ... -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap"></script>

<script type="text/javascript">
function initMap() {
    var styleArray = [
        {
            featureType: "all",
            stylers: [
                { hue: "#3e4950" },
                { saturation: -80 }
            ]
        }
    ];
    var map = new google.maps.Map(document.getElementById('mymaps'), {
        center: {lat: 48.6949454, lng: 2.1856039},
        scrollwheel: false,
        draggable: false,
        zoomControl: false,
        disableDoubleClickZoom: true,
        disableDefaultUI: true,
        // Apply the map style array to the map.
        styles: styleArray,
        zoom: 9
    });
}
</script>
<!-- ... -->

Answer 2

尝试将witdh和height添加到地图容器

<div id="map_canvas" style="width: 400px; height: 400px;"></div>

谷歌地图没有显示

2 个答案: