谷歌地图Javascript API在移动网站上不起作用

我正在为一位客户建立一个网站，他希望在“关于我们”页面上显示其位置的地图。我在桌面网站（www.al-van.org/jake/aboutUs.html）上使用谷歌地图Javascript API制作了一张功能齐全的地图。一切都很顺利，但当我尝试在android设备上查看该网站时，我只得到了一个“糟糕，出了什么问题，请查看错误控制台以获取更多技术信息”，这对我没有多大帮助。我似乎不明白到底发生了什么，为什么它在手机上不起作用。我需要使用Javascript API，因为客户端需要地图上的两个位置，而嵌入API不会这样做。这是我的JS，HTML是一个带有引导框架的简单div

<script>
    function initMap()
    {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 16,
            center: {lat: 42.389795, lng: -86.258617},
            styles: [
                {elementType: 'geometry'},
                {elementType: 'labels.text.stroke'},
                {elementType: 'labels.text.fill'}
            ]
        });
        // array used to label markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        // Add some markers to the map.
        var markers = locations.map(function(location, i) {
            return new google.maps.Marker({
                position: location,
                label: labels[i % labels.length]
            });
        });
        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers, {imagePath: 
'googlemaps/m'});
    }
    var locations = [
        {lat: 42.390337, lng: -86.259642},
        {lat: 42.388635, lng: -86.257246}
    ]
</script>
<script src="googlemaps/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js? 
 key=API_KEY&callback=initMap"></script>

函数initMap（）
{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：16，
中心：{lat:42.389795，lng:-86.258617}，
风格：[
{elementType:'geometry'}，
{elementType:'labels.text.stroke'}，
{elementType:'labels.text.fill'}
]
});
//用于标记标记的数组。
var标签='abcdefghijklmnopqrstuvxyz'；
//在地图上添加一些标记。
var markers=locations.map（函数（位置，i）{
返回新的google.maps.Marker({
位置:位置,，
标签：标签[i%标签.长度]
});
});
//添加标记群集器以管理标记。
var markerCluster=新的MarkerClusterer（映射，标记，{imagePath:
‘谷歌地图/m’}）；
}
变量位置=[
{lat:42.390337，lng:-86.259642}，
{lat:42.388635，lng:-86.257246}
]

您的API密钥对于域无效，或者超过了其配额限制

到这里：

---

获取您正在使用的域的API密钥。

您的API密钥对于该域无效，或者超过了它的配额限制

到这里：

---

---

获取您正在使用的域的API密钥。

与谷歌支持部门合作后，问题似乎在于android Chrome在网站中的放置方式。我已经明确地设置了允许的HTTP引用，包括www.blahblahblah.com和使用通配符的各种变体。当我把我的通配符放在blahblah.com上时，我没有做的是在“www”中加入一个通配符，它允许它在手机上工作。出于某种原因，除非你在android Chrome浏览器中明确输入“www.example.com”，否则它不会自动填充“www”。这就是解决我的问题的方法，我希望它能在将来有所帮助。

在与谷歌支持部门合作后，问题似乎在于android Chrome在网站中的放置方式。我已经明确地设置了允许的HTTP引用，包括www.blahblahblah.com和使用通配符的各种变体。当我把我的通配符放在blahblah.com上时，我没有做的是在“www”中加入一个通配符，它允许它在手机上工作。出于某种原因，除非你在android Chrome浏览器中明确输入“www.example.com”，否则它不会自动填充“www”。这就是解决我问题的方法，我希望这对将来有所帮助。

您可以通过ADB通过USB将devtools连接到android设备以查看错误。几乎100%确定错误在桌面网站上是可复制的，所以只需在您的PC上访问它并打开开发工具。它在我的PC上运行良好。没有问题。我确实有一个类似的问题，通过启用正确的API限制得到了修复，但是现在启用了Maps Javascript API，它应该可以工作了，并且已经打开了PC@sylphaxiom您是否100%确定移动站点正在加载相同的HTML，即使用相同的API密钥（听起来像是一个愚蠢的问题，但需要仔细检查）？我只有一个版本的aboutUs.html上传到服务器。我有一个朋友用另一个电话也检查了一下。他的像素也有同样的错误。这可能是Android Chrome的问题。您可以通过USB通过ADB将devtools连接到Android设备以查看错误。几乎100%确定该错误在桌面网站上是可复制的，因此只需在您的PC上访问它并打开开发工具。它在我的PC上工作正常。没有问题。我确实有一个类似的问题，通过启用正确的API限制得到了修复，但是现在启用了Maps Javascript API，它应该可以工作了，并且已经打开了PC@sylphaxiom您是否100%确定移动站点正在加载相同的HTML，即使用相同的API密钥（听起来像是一个愚蠢的问题，但需要仔细检查）？我只有一个版本的aboutUs.html上传到服务器。我有一个朋友用另一个电话也检查了一下。他的像素也有同样的错误。这可能是Android Chrome.Negative的问题。全新的API密钥，该站点尚未面向公众。我一直在和谷歌合作，让它在桌面上工作。现在它在桌面上工作，但在移动设备上仍然不工作。但是API密钥是好的，除非我需要启用另一个API库来添加API限制。@sylphaxiom您必须提供一个链接。API密钥（或超过配额）是谷歌显示该图像的原因。你说这个网站还没有面向公众，你在桌面上访问的开发域（它工作的地方）和你在手机上访问的开发域（它不工作的地方）相同吗？我在我的帖子中提供了上面的链接。它在实际的站点服务器上的一个子文件夹下运行，因此，除非公众知道导航到哪里，否则不会找到它。该网站位于，是的，这与我在桌面上访问该网站时使用的URL相同。@sylphaxiom-您对该问题的描述中只缺少一些内容。为了记录在案，我通过iPhone访问了这个链接，它工作得很好。谢谢，也许这是我手机版chrome的问题。当我使用PC chrome和使用开发工具调整屏幕大小以模拟手机宽度时，它就可以工作了。我使用的是Chrome的Note 8，这可能是我手机特有的问题。我