谷歌地圖顯示灰色框而不是谷歌地圖使用javascript

這裏我試圖用javascript來顯示我的地圖，但它顯示了一個灰色框而不是地圖，並且它沒有在控制檯中顯示任何錯誤。谷歌地圖顯示灰色框而不是谷歌地圖使用javascript

這裏是我的地圖的圖像：

請幫助解決這個問題。提前致謝。

這裏是我的代碼：

google.maps.event.addDomListener(window, 'load', init); 
 

 
function init() { 
 
    var mapOptions = { 
 
    zoom: 11, 
 
    center: new google.maps.LatLng(40.767089, -73.969458), 
 
    scrollwheel: false, 
 
    disableDefaultUI: true, 
 
    styles: [{ 
 
     stylers: [{ 
 
     hue: '#2c3e50' 
 
     }, { 
 
     saturation: 250 
 
     }] 
 
    }, { 
 
     featureType: 'road', 
 
     elementType: 'geometry', 
 
     stylers: [{ 
 
     lightness: 50 
 
     }, { 
 
     visibility: 'simplified' 
 
     }] 
 
    }, { 
 
     featureType: 'road', 
 
     elementType: 'labels', 
 
     stylers: [{ 
 
     visibility: 'off' 
 
     }] 
 
    }] 
 
    }; 
 

 
    var mapElement = document.getElementById('map_canvas'); 
 

 
    var map = new google.maps.Map(mapElement, mapOptions); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: map.getCenter(), 
 
    map: map, 
 
    title: 'Click to zoom' 
 
    }); 
 
}

html { 
 
    height: 100% 
 
} 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0 
 
} 
 
#map_canvas { 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
} 
 
#map_canvas * { 
 
    overflow: visible; 
 
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MyKeyhere"></script> 
 
<div id="map_canvas" style="width: 600px; height: 600px; position: relative;"> 
 
</div>

來源

2016-06-28 Sudhansu Tiwari

我測試了你的代碼，它正在工作。你用什麼類型的鑰匙？選中此文檔（https://developers.google.com/maps/documentation/javascript/get-api-key），如果您要使用Google Maps JavaScript API，則必須使用**瀏覽器鍵**（a API鍵類型） –

當您查看瀏覽器控制檯中的網絡活動時，什麼是磁貼請求的狀態碼？請求類似https：//www.google.com/maps/vt？.... – xomena

不知道這會有所幫助：

我使用我的網站上設置一個mapTypeIds不同勢的MapOptions。

var mapOptions = { 
     zoom: 19, 
     center: new google.maps.LatLng(51.7734896,4.6764931), 
     mapTypeControlOptions: { 
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] 
     } 
    };

來源

2016-06-28 14:46:28

但它不能幫助製作可能映射樣式 –

也許看看我的網站後面的代碼有幫助嗎？我在google.maps上使用自定義主題樣式：http://www.edwardpieper.nl/?c=contact –

谷歌地圖顯示灰色框而不是谷歌地圖使用javascript

回答

相關問題