如何使用Google地圖顯示地圖？

-1

我想說明一個谷歌地圖，我有這樣的代碼確實沒有工作：如何使用Google地圖顯示地圖？

<div id="map" style="width: 300px; height: 240px;">Loading map, please wait...</div> 
... 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MY_KEY_is_setup_correctly"></script> 
<script type="text/javascript"> 
    function initialize(){ 
     var map_container = document.getElementById('map'); 
     var settings = { 
      zoom: 7, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: new google.maps.LatLng(-18.893384076844953, -48.25330985812758), 
     }; 
     var map = google.maps.Map(map_container, settings); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script>

當我刷新我的網頁我看不到地圖和JavaScript控制檯拋出此消息：

GET http://csi.gstatic.com/csi?v=2&s=mapsapi3&action=apiboot2&rt=main.102 [HTTP/1.1 204 No Content 428ms]

爲什麼我的代碼失敗？

來源

2015-07-12 BPS

您需要創建一個Map類的新實例。

相反的：

var map = google.maps.Map(map_container, settings);

寫：

var map = new google.maps.Map(map_container, settings);

來源

2015-07-12 14:25:11 Schien

哎呀，我一直在尋找這整整一天，並沒有看到： 0謝謝！ – BPS

heh。錯誤消息有時可能會產生誤導。我將您的代碼與我的鍋爐板逐行比較，並看到缺失的「新」 – Schien

你在你的代碼中的錯字，你的google.maps.Map構造函數之前缺少new。您的代碼應該是：

function initialize() { 
    var map_container = document.getElementById('map'); 
    var settings = { 
     zoom: 7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: new google.maps.LatLng(-18.893384076844953, -48.25330985812758) 
    }; 
    // add "new" before google.maps.Map constructor 
    var map = new google.maps.Map(map_container, settings); 
} 
google.maps.event.addDomListener(window, 'load', initialize);

working fiddle

代碼片段：

function initialize() { 
 
    var map_container = document.getElementById('map'); 
 
    var settings = { 
 
    zoom: 7, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    center: new google.maps.LatLng(-18.893384076844953, -48.25330985812758) 
 
    }; 
 
    var map = new google.maps.Map(map_container, settings); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map" style="width: 300px; height: 240px;">Loading map, please wait...</div>

來源

2015-07-12 14:26:55 geocodezip

如何使用Google地圖顯示地圖？

回答

相關問題