Question

<body>
    <div id='map'></div>
    <script src='/static/js/shortcuts.js'></script>
    <script src='/static/js/map.js'></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>

注意：我出于显而易见的原因删除了api密钥。

出于某种原因，这不会显示地图。但回调似乎正确执行：

function initMap() {
    var map = new google.maps.Map($('#map'), {zoom: 4, center: {lat: 0, lng: 0}});
}

注意：$只是querySelector的快捷方式。

可能是什么问题，我该如何解决？

Answer 1

需要一些参数，即缩放和中心。例如：

function initMap() {
  var map = new google.maps.Map($('#map'), {
    zoom: 16,
    center: {lat: -25.363, lng: 131.044},
  });
}

Answer 2

您缺少第二个参数（缩放/位置）：

function initMap(){
  var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: something
  });
});

编辑：刚刚看到您关于使用$的评论，我改变了我的回答。

Answer 3

我忘了设置一个高度。

#map {
    height: 500px;
}

Answer 4

<强> Maps.html

替换googlemaps API的密钥

<!DOCTYPE html>
<html>    
<body>    
<div id="map" style="width:100%;height:500px"></div>

<script>
function myMap() {
  var myCenter = new google.maps.LatLng(51.508742,-0.120850);
  var mapCanvas = document.getElementById("map");
  var mapOptions = {center: myCenter, zoom: 5};
  var map = new google.maps.Map(mapCanvas, mapOptions);
  //additional for infobox
  var text="hello";
  var marker = new google.maps.Marker({position:myCenter});
  marker.setMap(map);
  google.maps.event.addListener(marker,'click',function() {
    var infowindow = new google.maps.InfoWindow({
      content: text
    });
  infowindow.open(map,marker);
  });
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=REPLACEKEY&callback=myMap"></script>
</body>
</html>

谷歌地图没有显示

4 个答案: