使用谷歌地圖API內部div不工作

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>