谷歌地图错误:哎呀!出了些问题。此页面未正确加载 Google 地图

2023-11-21

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

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

“糟糕!出了点问题。此页面未正确加载 Google 地图。有关技术详细信息,请参阅 >JavaScript 控制台”

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

我还尝试从 Google 开发者控制台获取(新的)API 密钥,并将其插入 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', '[email protected] <br /> [email protected]', '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', '[email protected]', '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', '[email protected]', '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', '[email protected]', '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', '[email protected]', '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。我的地图现在可以正常使用了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

谷歌地图错误:哎呀!出了些问题。此页面未正确加载 Google 地图 的相关文章

随机推荐

  • GraphQL 枚举类型会自动解析它们的值吗?

    我应该期望枚举类型自动解析还是这些类型仅存在以限制选项 给定以下 GraphQL 架构 type Job description String status Status enum Status PENDING REVIEW PENDING
  • 如何在 Game Center 中接受邀请

    我正在尝试通过游戏中心实施邀请 但有一点我不明白 好的 我已从一台设备向另一台设备发送了邀请 然后我在接收器上有一个 UIAlertView 询问我是否愿意接受或拒绝邀请 当我接受它时 它的处理方式如下 GKMatchmaker share
  • Bootstrap xs 列换行

    对于最小的 xs 尺寸 即使我的列加起来为 12 如果屏幕宽度减小到超过一定限制 它们也不会按预期工作 例如 div class container div class row div class col xs 2 div div clas
  • 如何使用 igraph 获取最短路径上的顶点?

    我在用着igraph生成顶点对之间最短路径距离的矩阵 但我不知道如何返回顶点 到目前为止我有 path length matrix ig graph shortest paths dijkstra None None distance AL
  • 如何在 Swift 中获取 2 个数组的公共元素列表?

    我有两个数组 fruitsArray apple mango blueberry orange vegArray tomato potato mango blueberry 我怎样才能获得这两个数组中的常见项目列表 ouptput mang
  • 将数组传递给 asp net core web api 操作方法 HttpGet

    我正在尝试将整数数组发送到我的操作方法 代码如下所示 HttpGet public async Task
  • ASP.NET Webforms 不会为 Chrome/iOS 呈现回发 JavaScript 函数

    当我们提供用户代理时Mozilla 5 0 iPhone CPU iPhone OS 5 0 1 like Mac OS X en us AppleWebKit 534 46 0 KHTML like Gecko CriOS 21 0 11
  • 从 CVImageBufferRef 获取内存所有权

    我正在制作一个简单的管道 从 AVCaptureSession 获取图像 在 OpenCV 中处理它们 然后在 OpenGL 中渲染它们 它基于 RosyWriter 但没有音频和录音功能 OpenCV 处理看起来像 void proces
  • Internet Explorer 中带有边框半径的不稳定 CSS 动画

    在 Internet Explorer 中 此动画似乎在摆动 我正在阅读答案这个问题他们听起来好像可以解决这个问题 我不能真正使用图像 因为边界半径不是恒定的 而且我不想使用动画 gif 我知道 摆动 不是一个很好的描述 但我想不出任何其他
  • pyplot:我可以设置全局标记大小参数吗?

    是否有一个命令可以用来全局设置整个程序中所有散点图点的大小 You can 定义您自己的样式表 or手动覆盖默认值 import matplotlib as mpl mpl rcParams lines markersize 10 And
  • 恢复下载在 Android 中不起作用

    这段用于恢复下载的代码在 Android 中无法正常工作 尽管它在 Java 应用程序中工作正常 在这里 我尝试下载一个 zip 文件 它将恢复下载 但最终结果是一个无效的 zip 文件 BufferedInputStream in nul
  • JsTree 打开一个节点然后选择一个子节点(使用json_result)

    我在 MVC2 项目中使用的 JsTree 遇到问题 我想创建一个函数来取消选择 关闭树上的所有节点 然后打开一个特定的节点 并选择一个特定的子节点 我有两个节点的 Id 值 问题是 select node 总是在 open node 完成
  • 棒棒糖之前的设备上带有 CardView 的空白

    我正在尝试向应用程序上的某些视图添加舍入和阴影 并利用卡片视图库来实现这一目标 它在棒棒糖设备上看起来不错 但与棒棒糖之前的任何设备都遇到了兼容性问题 我将在序言中说 我已经查看了以下问题的答案 发现它们都不适合我 Appcompat Ca
  • Mono https web 请求失败并显示“身份验证或解密失败”

    我正在制作一个简单的 REST 客户端以在我的 C 应用程序中使用 在 Windows 上的 net 中 它适用于 http 和 https 连接 在 Ubuntu 10 10 上的 Mono 2 6 7 中 也用 2 8 进行了测试 结果
  • 删除附加脚本 javascript

    我如何删除附加的脚本 因为它会导致我的应用程序出现一些问题 这是我获取脚本的代码 var nowDate new Date getTime var url val redirect uri notify js nocache nowDate
  • 处理 Newtonsoft.Json 中的小数值

    Edit 已经快五年了 我认为这不是正确的选择 客户应以正确的数字格式发布数据 使用 React 或 Angular 等当前框架 或者使用适当的架构以及错误处理和验证 我认为这几乎不是问题 但如果有人想展示他们的 Json NET 能力 请
  • PHP 中的 SQL Server 存储过程输出参数

    我需要帮助在 PHP 中从 SQL Server 运行存储过程 PHP 运行在 Unix Linux 服务器上 我们无法在 PHP 中返回 OUTPUT 变量 以下是PHP代码 conn mssql connect server user
  • 在 HTML 中嵌入 Ruby 代码?

    在 PHP 中 可以这样做
  • 使用 Visual Studio 2012 编译 C 应用程序

    我计划使用 Microsoft Visual Studio 2012 用 C 语言编写应用程序 问题是我找不到在编辑器中正确编译它的方法 我找到了这个解决方案http msdn microsoft com en us library bb3
  • 谷歌地图错误:哎呀!出了些问题。此页面未正确加载 Google 地图

    第一次在stackoverflow上提问 所以如果我违反了一些规则 请耐心等待 尽我最大努力自己解决寻找解决方案 但没有运气 我使用了一个工具来帮助我自定义具有多个标记位置和样式的谷歌地图 代码如下 我在本地和我自己的域上对其进行了测试 并