Javascript Google Map не работает

Question

Я новичок в Google Maps api и его библиотеке. Интересно, почему я не вижу карту на своей странице.

Это код:

<script src="http://maps.googleapis.com/maps/api/js?v=3"></script> 
    <script> 
     var latlong = new google.maps.LatLng(-0.179041, -78.499211); 
     console.log(latlong); 
     var mapOptions = { 
      zoom: 13, 
      center: latlong, 
      disableDefaultUI: false, 
      navigationControl: false, 
      mapTypeControl: false, 
      scrollwheel: false, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var map = new google.maps.Map(document.getElementById('city_map'), 
       mapOptions); 
     console.log(map); 
     google.maps.event.trigger(map, 'resize'); 
     map.setZoom(map.getZoom()); 

     var marker = new google.maps.Marker({ 
      position: latlong, 
      map: map, 
      title: "Test" 
     }); 
</script> 

Вы видите, что я console.logginglatlong и map, они выглядят хорошо .. в любом случае, я надеюсь, что это не что-то очень очевидно.

Answer 1

У вас нет высоты и ширины, прикрепленных к div, вот почему. Посмотрите эту скрипку.

#city_map{ 
min-height:300px; 
min-width:300px; 
} 

https://jsfiddle.net/dm7j7494/1/