Google Maps Javascript API在移動網站上不起作用

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”。 這就是解決我的問題的方法，希望對將來有所幫助。