谷歌地图不断给我同样的错误

Question

我正在尝试将google map tp插入我的html代码，但它会不断显示以下错误：“ myMap不是函数”，这是我的代码：

 function myMap() { var mapOptions = { center: new google.maps.LatLng(51.5, -0.12), zoom: 10, mapTypeId: google.maps.MapTypeId.HYBRID } var map = new google.maps.Map(document.getElementById("map"), mapOptions); } 

 #map{ width: 100%; height: 250px; } 

 <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js?key=APIKEY4&callback=myMap"></script> 

Answer 1

您永远不会初始化实际的地图。 尝试以下方法。 （当我删除API密钥时，它将引发错误）

 function myMap() { var mapOptions = { center: new google.maps.LatLng(51.5, -0.12), zoom: 10, mapTypeId: google.maps.MapTypeId.HYBRID } var map = new google.maps.Map(document.getElementById("map"), mapOptions); } google.maps.event.addDomListener(window, 'load', myMap); 

 #map{ width: 100%; height: 250px; } 

 <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js?key=APIKEY4&callback=myMap"></script> 

Answer 2

如果重新编写代码段以在包含API之前定义myMap函数，则发布的代码myMap工作。 请注意，您（当前）不需要stackoverflow.com上的密钥，因为它具有无密钥访问权限。

 #map { width: 100%; height: 250px; } 

 <div id="map"></div> <script> function myMap() { var mapOptions = { center: new google.maps.LatLng(51.5, -0.12), zoom: 10, mapTypeId: google.maps.MapTypeId.HYBRID } var map = new google.maps.Map(document.getElementById("map"), mapOptions); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>