javascript - Google map 错误 : Oops! 出了点问题。此页面未正确加载 Google map

Question

第一次在 stackoverflow 上提问，如果我违反了一些规则，请耐心等待，我尽力自己解决，寻找解决方案，但没有运气。

我使用了一个工具来帮助我自定义具有多个标记位置和样式的谷歌地图(下面的代码)。我在本地和我自己的域上对其进行了测试，并且运行良好。当我在生产站点上发布时，它显示了一段时间，然后出现错误消息

"Oops! Something went wrong. This page didn't load Google Maps correctly. See the >JavaScript console for technical details"

Firefox 上的 Javascript 控制台只是报告一个错误，我认为不相关:“API Fullscreen is deprecated”

我还尝试从 Google 开发者控制台获取一个(新的)API KEY 并将其插入 API 请求链接中，如 Google 文档中所述(运气不好)。我在 Google Search Console 上验证了网站的所有权。无论如何，我认为这不是我的情况，因为域是最近的并且控制台不报告有关 API KEY 的任何错误。

真的很想知道怎么了。这是一个不工作的演示:http://www.fastdirectlink.com/map.html这是一个演示工作:http://tiikeridesign.com/map.html

这是我使用的代码

<script src='https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js'></script> 

<script> 
    google.maps.event.addDomListener(window, 'load', init);
    var map;
    function init() {
        var mapOptions = {
            center: new google.maps.LatLng(45.0735671,7.67406040000003),
            zoom: 2,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.DEFAULT,
            },
            disableDoubleClickZoom: false,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            },
            scaleControl: true,
            scrollwheel: true,
            panControl: true,
            streetViewControl: true,
            draggable : true,
            overviewMapControl: true,
            overviewMapControlOptions: {
                opened: true,
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: [

  {

    "featureType": "water",

    "elementType": "geometry.fill",

    "stylers": [

      { "color": "#d3d3d3" }

    ]

  },{

    "featureType": "transit",

    "stylers": [

      { "color": "#808080" },

      { "visibility": "off" }

    ]

  },{

    "featureType": "road.highway",

    "elementType": "geometry.stroke",

    "stylers": [

      { "visibility": "on" },

      { "color": "#b3b3b3" }

    ]

  },{

    "featureType": "road.highway",

    "elementType": "geometry.fill",

    "stylers": [

      { "color": "#ffffff" }

    ]

  },{

    "featureType": "road.local",

    "elementType": "geometry.fill",

    "stylers": [

      { "visibility": "on" },

      { "color": "#ffffff" },

      { "weight": 1.8 }

    ]

  },{

    "featureType": "road.local",

    "elementType": "geometry.stroke",

    "stylers": [

      { "color": "#d7d7d7" }

    ]

  },{

    "featureType": "poi",

    "elementType": "geometry.fill",

    "stylers": [

      { "visibility": "on" },

      { "color": "#ebebeb" }

    ]

  },{

    "featureType": "administrative",

    "elementType": "geometry",

    "stylers": [

      { "color": "#a7a7a7" }

    ]

  },{

    "featureType": "road.arterial",

    "elementType": "geometry.fill",

    "stylers": [

      { "color": "#ffffff" }

    ]

  },{

    "featureType": "road.arterial",

    "elementType": "geometry.fill",

    "stylers": [

      { "color": "#ffffff" }

    ]

  },{

    "featureType": "landscape",

    "elementType": "geometry.fill",

    "stylers": [

      { "visibility": "on" },

      { "color": "#efefef" }

    ]

  },{

    "featureType": "road",

    "elementType": "labels.text.fill",

    "stylers": [

      { "color": "#696969" }

    ]

  },{

    "featureType": "administrative",

    "elementType": "labels.text.fill",

    "stylers": [

      { "visibility": "on" },

      { "color": "#737373" }

    ]

  },{

    "featureType": "poi",

    "elementType": "labels.icon",

    "stylers": [

      { "visibility": "off" }

    ]

  },{

    "featureType": "poi",

    "elementType": "labels",

    "stylers": [

      { "visibility": "off" }

    ]

  },{

    "featureType": "road.arterial",

    "elementType": "geometry.stroke",

    "stylers": [

      { "color": "#d6d6d6" }

    ]

  },{

    "featureType": "road",

    "elementType": "labels.icon",

    "stylers": [

      { "visibility": "off" }

    ]

  },{

  },{

    "featureType": "poi",

    "elementType": "geometry.fill",

    "stylers": [

      { "color": "#dadada" }

    ]

  }

],
        }
        var mapElement = document.getElementById('map-canvas');
        var map = new google.maps.Map(mapElement, mapOptions);
        var locations = [
['Headquarter', '<address>Via Ottavio Assarotti, 10 - Torino <br /> 10122 Italy</address>', 'Phone: +39 011 549444', 'undefined', 'undefined', 45.0735671, 7.67406040000003, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png'],['Offices - Europe', 'Str. del Redentore Alto, 157 Moncalieri TO\"<br />10024 Italy', 'Phone: +39 011 0603933 <br /> Mobile: +39 335 8291680', 'fastdirectlink@legalmail.com <br /> g.manzo@fastdirectlink.com', 'undefined', 45.026912, 7.735915, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png'],['Russia', 'Alberto Fiocchi<br />16, Teterinskiy Pereulok <br />109004 Moscow (Russia)', 'Mobile: +7 985 8546283', 'albe.fiocchi@gmail.com', 'undefined', 55.7453888,  37.65318679999996, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png'],['China', 'Ines Tammaro<br />Yangtze river international garden phase II<br />Shanghai China', 'Phone: +86 158 9648 1992  Mobile: +86 331 2166946', 'i.tammaro@fastdirectlink.com', 'undefined', 31.104447, 121.432655, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png'],['USA', 'Jerry Yocum<br />835, Bunty Station Road,<br />43015 Delaware, OH – USA', 'Phone: +1 (614) 7361111', 'jerryyocum835@yahoo.com', 'undefined', 40.250594,  -83.07493899999997, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png'],['ASIAN', 'Hubert Fournier<br />116, Middle Road, ICB Enterprise House,<br />#08-03/04, 188972 Singapore', 'Phone: (65) 63339833', 'italia@optimconsulting.net', 'undefined', 1.2992375,  103.7835042, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png']
        ];
        for (i = 0; i < locations.length; i++) {
            if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
            if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
            if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
           if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
           if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}
            marker = new google.maps.Marker({
                icon: markericon,
                position: new google.maps.LatLng(locations[i][5], locations[i][6]),
                map: map,
                title: locations[i][0],
                desc: description,
                tel: telephone,
                email: email,
                web: web
            });
link = '';            bindInfoWindow(marker, map, locations[i][0], description, telephone, email, web, link);
     }
 function bindInfoWindow(marker, map, title, desc, telephone, email, web, link) {
      var infoWindowVisible = (function () {
              var currentlyVisible = false;
              return function (visible) {
                  if (visible !== undefined) {
                      currentlyVisible = visible;
                  }
                  return currentlyVisible;
               };
           }());
           iw = new google.maps.InfoWindow();
           google.maps.event.addListener(marker, 'click', function() {
               if (infoWindowVisible()) {
                   iw.close();
                   infoWindowVisible(false);
               } else {
                   var html= "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><h4>"+title+"</h4><p>"+desc+"<p><p>"+telephone+"<p><a href='mailto:"+email+"' >"+email+"<a></div>";
                   iw = new google.maps.InfoWindow({content:html});
                   iw.open(map,marker);
                   infoWindowVisible(true);
               }
        });
        google.maps.event.addListener(iw, 'closeclick', function () {
            infoWindowVisible(false);
        });
 }
}
</script>
<style>
    #map-canvas {
        height:400px;
        width:1024px;
    }
    .gm-style-iw * {
        display: block;
        width: 100%;
    }
    .gm-style-iw h4, .gm-style-iw p {
        margin: 0;
        padding: 0;
    }
    .gm-style-iw a {
        color: #4272db;
    }
</style>
    <div id="map-canvas"/>

Answer 1

我遇到了同样的问题。我的页面突然开始显示灰色窗口和错误，而不是之前工作正常的 map 。

我在寻找解决方案。事实证明，从几天前开始，谷歌地图 API 就需要开发人员 key 。注册 Google Api key 并在您的代码中提及它。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap" async defer></script>

从 google api 控制台获取 YOUR_KEY。我的 map 现在工作正常。