Google Maps Api не отображает карту на div

Question

Этот вопрос задан пару раз, но никакой ответ не работал для меня. Я пытался добавить ширину и высоту контейнера DIV

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

Пробовал либо добавить domListener событие в Google Maps объекта или просто с помощью функции JQuery document.ready

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

Я создал этот Jsfiddle в показать свою точку зрения, я знаю, что мне не хватает ключа API, но это, похоже, не проблема.

Я не знаю, чего здесь не хватает. Есть идеи?

Я знаю, что мне не хватает АНИ ключ

Snippet с кодом Ниже

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.

<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); 
    // ... 
}