此页面没有'无法正确加载谷歌地图.有关技术详细信息，请参阅JavaScript控制台

This page didn't load Google Maps correctly. See the JavaScript console for technical details

本文关键字：技术 谷歌地图 加载 详细信息 控制台 JavaScript 请参阅      更新时间：2023-09-26

哎呀！出了问题。此页面未正确加载谷歌地图。有关技术详细信息，请参阅JavaScript控制台。

我不知道为什么。

<!DOCTYPE html>
<html>
<head>
    <script src="http://maps.googleapis.com/maps/api/js">
    </script>
    <script>
        var myCenter = new google.maps.LatLng(30.023354, 31.477439);
        function initialize() {
            var mapProp = {
                center: myCenter,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
            var marker = new google.maps.Marker({
                position: myCenter,
            });
            marker.setMap(map);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="googleMap" style="width:500px;height:380px;"></div>
    
</body>
</html>

您需要为谷歌地图生成特殊的api密钥

你的<script src="http://maps.googleapis.com/maps/api/js">应该看起来像这个

  <script src="https://maps.googleapis.com/maps/api/js?key=your_key">></script

转到https://console.developers.google.com获得免费钥匙。

以下是修复错误的方法。

转到https://console.developers.google.com/apis/credentials单击API密钥的名称以编辑其设置。在应用程序限制下，选择"HTTP引用者(网站("，然后添加下面的两个条目(用您自己的域替换yourname.com(。

键入第一个条目，然后按键盘上的enter键添加。重复此操作添加第二个条目。

同时拥有两个条目(带星号(将有助于确保您的地图在网站的任何URL上都能工作。yourname.com/**.yourname.com/*谷歌地图API限制

单击"保存"按钮，然后等待几分钟，等待更改生效(谷歌表示这可能需要5分钟(。

相关文章：