Google地图无法加载

时间:2017-10-27 06:27:24

标签: javascript html google-maps

我需要在我的网页中集成谷歌地图。我生成了一个API。但是地图没有显示。我正在我的本地服务器上测试它。

<h3>My Google Maps Demo</h3>
<div id="map">
    <span class="labels">Heading</span>
</div>
<script  src="https://maps.googleapis.com/maps/api/js?key=[API]&callback=initMap">
</script>
<script type="text/javascript">
    function initMap() {
                alert("Yes");
                var uluru = { lat: -25.363, lng: 131.044 };
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: uluru
                });
                var marker = new google.maps.Marker({
                    position: uluru,
                    map: map
                });
            }
</script>

但没用。他们的代码中有任何问题吗?我可以检查我的API是否正常工作

4 个答案:

答案 0 :(得分:3)

我无法发表评论,所以我写在这里。 你有密钥代码吗?

在控制台中,有错误:

  

RefererNotAllowedMapError错误
  加载Google Maps JavaScript API的当前网址尚未添加到允许的引荐来源列表中。请在Google API控制台上查看API密钥的引荐来源设置。

请参阅Google API控制台中的API密钥。有关更多信息,请参阅安全使用API​​密钥的最佳实践。

也许this可以帮到你。

答案 1 :(得分:1)

您需要使用api密钥才能访问地图。像这样修改你的代码:

JS:

 function initMap() {
   alert("Yes");
   var uluru = {
     lat: -25.363,
     lng: 131.044
   };
   var map = new google.maps.Map(document.getElementById('map'), {
     zoom: 4,
     center: uluru
   });
   var marker = new google.maps.Marker({
     position: uluru,
     map: map
   });

 }
 google.maps.event.addDomListener(window, "load", initMap);

查看此演示:http://jsfiddle.net/lotusgodkk/hLenqzmy/64/

您可以从此处获取API密钥:https://developers.google.com/maps/documentation/javascript/get-api-key

答案 2 :(得分:1)

您的代码运行正常。 你需要在那里放置一个JavaScript Google API(我想你放了另一个谷歌地图密钥)

enter image description here

另请查看某些Google示例的this链接

答案 3 :(得分:0)

此外,在页面加载时会调用initMap,并且在调用它时MIGHT尚未声明?