Question

我正在为希望在其“关于我们”页面上显示其位置的地图的客户构建站点。我已经使用Google Maps Javascript API在桌面站点（www.al-van.org/jake/aboutUs.html）上使地图正常工作并且可以正常使用。一切都很好，但是当我尝试在android设备上查看网站时，我只是收到“糟糕，请参阅错误控制台以获取更多技术信息”，这对我没有太大帮助。我似乎无法弄清楚发生了什么，以及为什么它无法在移动设备上运行。我需要使用Javascript API，因为客户端需要在地图上2个位置，而嵌入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>

Answer 1

您的API密钥对域无效，或者超出了配额限制。

转到此处：https://developers.google.com/maps/documentation/javascript/get-api-key

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

Answer 2

与Google支持人员合作后，问题似乎出在Android Chrome浏览器放入网站的方式上。我已经明确设置了所有允许的HTTP引荐来源网址，包括www.blahblahblah.com以及使用通配符的各种变体。我没有做的是用通配符代替“ www”。当我将通配符放置为 blahblah.com 时，它可以在手机上使用。出于某种原因，除非您在Android Chrome浏览器中明确输入“ www.example.com”，否则它将不会自动填充“ www”。这就是解决我的问题的方法，希望对以后有所帮助。

Google Maps Javascript API在移动网站上不起作用

2 个答案: