谷歌地图错误:哎呀!出了什么问题.这个页面没有正确加载谷歌地图

Google Maps error: Oops! Something went wrong. This page didn't load Google Maps correctly

本文关键字：谷歌地图 加载 问题 哎呀 错误 什么      更新时间：2023-09-26

第一次在stackoverflow上提问，所以如果我打破了一些规则，请耐心等待，我尽力自己寻找解决方案，但运气不好。

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

"哦!出了什么问题。这个页面无法正确加载谷歌地图。有关技术细节，请参阅>JavaScript控制台"

Javascript控制台在Firefox上只是报告一个错误，我认为不相关:"API全屏被弃用"

我也尝试从谷歌开发者控制台获得一个(新的)API密钥，并将其插入到谷歌文档中描述的API请求链接中(没有运气)。我在谷歌搜索控制台验证了该网站的所有权。不管怎样，我认为这不是我的情况，因为域名是最近的，控制台没有报告任何关于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"/>

我遇到了同样的问题。我的页面突然开始显示灰色窗口和错误，而不是地图，这是工作正常，直到一段时间回来。

我寻找解决方案。事实证明，谷歌地图API需要开发者密钥，因为几天前。注册Google Api密钥，并在代码中提到它。

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

从google api控制台获取YOUR_KEY。

快速按下F12键切换到开发控制台并重新加载:

MissingKeyMapError并指向https://developers.google.com/maps/documentation/javascript/error-messages供参考。

在Google最新更新中，您应该为googleapis.com的每个脚本添加密钥(否则Google地图将无法工作)，即

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

，如果你想使用其他功能，如地点，地理位置，然后添加下面的行也

<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&key=your_key" async="" defer="defer" type="text/javascript"></script>

注意:对于地点，地理位置和其他功能，您应该从google控制台启用它，有关功能启用的更多详细信息请查看
https://stackoverflow.com/a/41079098/6295712

在我的例子中，这是一个与限制相关的问题。我在Google控制台

的"网站限制"中使用了通配符。
 *example.com/*

通配符无效!我必须使用实现API的页面的完整地址。

 mysite.com/contact-page/

希望对大家有所帮助。

我有一个api键，所有的地图加载良好的网页在计算机上…但在手机上加载相同的页面和地图时就不一样了，这适用于普通网页地图和手机网页地图……电脑没问题，但手机回不来对不起!出了什么问题。这个页面没有正确加载谷歌地图!参见Javascript控制台....但是javascript控制台没有返回任何错误!我已经检查了在iPhone和三星上加载地图的网页，他们返回错误，从计算机浏览器加载相同的页面，他们加载没有错误，相同的url !

所以最终我发现了错误:我添加了url在谷歌地图api帐户www.domain....虽然这在我电脑上的浏览器上似乎没有问题，但在手机上却有问题……所以我发现在api www.domain.com/page和domain.com/page中添加2个URL修复了错误，并且地图加载在移动设备以及计算机上!

相关文章：