谷歌地圖Api不會將地圖顯示爲div

Question

此問題已被問了幾次，但沒有任何反應適用於我。我試圖寬度和高度添加到容器的div

<div style="height:900px;width:1024px;"> 
    Mapa 
    <div id="map" class="map"></div> 
</div> 

嘗試要麼添加domListener事件到Google地圖對象或只是使用jquery的document.ready函數

google.maps.event.addDomListener(window, 'load', initialize); 
$(document).ready(function() { initialize(); }); 

我建立這個Jsfiddle到顯示我的觀點，我知道我錯過了API密鑰，但這似乎不是問題所在。

我不知道我在這裏失蹤。有任何想法嗎？

我知道我缺少API密鑰

片段與下面的代碼

function initialize(){ 
 
    $(".map").each(function(){ 
 
     var centerLat = 52.5230809; 
 
     var centerLong = 13.3999976; 
 
     console.log(centerLat); 
 
     console.log(centerLong); 
 
     var centerLatLong = new google.maps.LatLng(centerLat, centerLong); 
 
     var mapOptions = { 
 
      center: { lat: parseFloat(centerLat), lng: parseFloat(centerLong)}, 
 
      zoom: 8, 
 
      scrollwheel: false, 
 
      draggable:true, 
 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }; 
 

 
     var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 
     console.log(map); 
 
     var marker = new google.maps.Marker({ 
 
      position: centerLatLong, 
 
      map: map 
 
     }); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 
$(document).ready(function() { initialize(); });

<div style="height:900px;width:1024px;"> 
 
    Mapa 
 
    <div id="map" class="map"></div> 
 
</div>

Answer 1

您應該添加CSS來映射股利。

<div style="height:900px;width:1024px;"> 
     Mapa 
     <div style="height:900px;width:1024px;" id="map" class="map"></div> 
    </div> 

Answer 2

作爲@egvrcn 's answer。但爲什麼你使用.each()？你想使用多個地圖？

是嗎？

function initialize() { 
    $(".map").each(function() { 
     var $this = $(this); 
     // ... 
     var map = new google.maps.Map($this[0], mapOptions); 
     // ... 
    }); 
} 

沒有？，所以只是...

function initialize() { 
    // ... 
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
    // ... 
}