在div中使用谷歌地图api无法正常工作

Question

我一直试图将谷歌地图添加到我的页面，但无济于事。我的代码可以独立工作，但是当我添加到真正的网页时，地图根本不显示。

 <div id="map" style="width:100%;height:500px"></div>
<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&callback=initMap"
async defer></script>

页面看起来像这样

如您所见，div弹出但不是地图。我怎么能得到这个？

Answer 1

您的myMap函数从未被调用过。你可以这样称呼它，

function myMap() {
   ... 
}

myMap();

或在脚本上使用回调参数..

<script async defer src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=myMap"> </script>

修改

你说错了，你的脚本参数应该是&，而不是&。尝试将代码更改为，

<div id="map" style="width:500px;height:500px"></div>

<script>
    function myMap() {
        var mapCanvas = document.getElementById("map");
        var mapOptions = {
            center: new google.maps.LatLng(51.508742,-0.120850),
            zoom: 5
        };
        var map = new google.maps.Map(mapCanvas, mapOptions);
    }
</script>

<script async defer src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&callback=myMap"> </script>

有关详细信息，请查看此fiddle。

- 编辑2 -

我不知道为什么你不能让它在你的网站上工作。因为我能做得很好。

下面是我在运行时在您站点的控制台上注入的脚本。

$('.content--body__wrapper').append('<div id="map" />')
$('#map').attr('style', 'width:500px; height:500px')
$('.content--body__wrapper').append(`<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
</script>`);
$('.content--body__wrapper').append(`<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&callback=initMap" async defer></script>`);

我从您的屏幕截图中可以看出，您的initMap功能未被调用。而且我不确定它是否是谷歌地图的回调，因为它在你的控制台中没有提供任何错误。

以下是您可能想要尝试的替代方法。尝试在js上调用initMap而不是回调。

<div id="map" style="width:100%;height:500px"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI"></script>

<script>
    $(function() {
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8
            });
        }
        initMap();
    });
</script>