Карта не отображается в Google Maps JavaScript API v3 при вложении в тег div

Я пытаюсь поместить тег div, который показывает карту (<div id="map-canvas"></div>) внутри другого div, но не отображает карту таким образом. Это проблема CSS или JavaScript? Или это просто способ работы API?

Здесь мой код с вложенным div:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map-canvas {
            margin: 0;
            padding: 0;
            height: 100%;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
    </script>
    <script>
        var map;
        function initialize() {
          var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div> <!-- ommiting this div will show the map -->
        <div id="map-canvas"></div>
    </div>
</body>
</html>

Ответ 1

Добавить style="width:100%; height:100%;" в div, чтобы увидеть, что делает

не к #map_canvas, а к главному div

Пример

<body>
    <div style="height:100%; width:100%;">
         <div id="map-canvas"></div>
    </div>
</body>

Есть еще несколько ответов, объясняющих, почему это необходимо

Ответ 2

Проблема заключается в процентном размере. Вы не определяете размер родительского div (новый), поэтому браузер не может сообщить размер API Карт Google. Предоставление обертки div определенного размера или процентного размера, если размер его родителя может быть определен, будет работать.

См. это объяснение из учебника Google Maps API v2 от Майка Уильямса:

Если вы попытаетесь использовать style = "width: 100%; height: 100%" на вашем div, вы получите div div с нулевой высотой. Что потому что div пытается быть в процентах от размера <body>, но по умолчанию <body> имеет неопределенный высота.

Есть способы определить высоту экрана и использовать это количество пикселей в качестве высоты div карты, но простой альтернативой является изменение <body>, чтобы его высота составляла 100% от страницы. Мы можем это сделать применяя style = "height: 100%" к <body> и <html>. (Мы должны сделать это для обоих, иначе <body> пытается быть на 100% от высоты документа, а по умолчанию это неопределенная высота.)

Добавьте 100% -ный размер в html и тело в свой CSS

    html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

Добавьте его в строку для любых div, которые не имеют id:

<body>
  <div style="height:100%; width: 100%;"> 
    <div id="map-canvas"></div>
  </div>
</body>

Ответ 3

Я решил эту проблему:

    <div id="map" style="width: 100%; height: 100%; position: absolute;">
                 <div id="map-canvas"></div>
     </div>

Ответ 4

ФИКСИРОВАННЫЙ

Укажите начальную высоту div и укажите высоту в процентах в вашем стиле;

#map {
   height: 100%;
}

<div id="map" style="clear:both; height:200px;"></div>

Ответ 5

В моем случае я получал серый фон, и оказалось, что это значение масштабирования в параметрах карты. Да, не имеет смысла.

Ответ 6

Мастер

Вы пытались установить высоту и ширину дополнительного div, я знаю, что в проекте, над которым я работаю, JS не будет помещать ничего в div, если у меня уже не установлена высота и ширина.

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

<body>
    <div style="height:500px; width:500px;"> <!-- ommiting the height and width will not show the map -->
         <div id="map-canvas"></div>
    </div>
</body>

Я бы рекомендовал либо жестко кодировать его, либо назначить div ID, а затем добавить его в ваш файл CSS.

Ответ 7

Я просто хочу добавить то, что сработало для меня, я добавил высоту и ширину как для div, так и для бутстрапа, чтобы сделать его отзывчивым

   <div class="col-lg-1 mapContainer">
       <div id="map"></div>
   </div>

   #map{
        height: 100%;
        width:100%;
   }
   .mapContainer{
        height:200px;
        width:100%
   }

чтобы col-lg-1 работал над добавлением бутстрапа Здесь

Ответ 8

Поймите, что это было решено, но приведенное выше решение может работать не во всех ситуациях.

Для моего случая

<div style="height: 490px; position:relative; overflow:hidden">
    <div id="map-canvas"></div>
</div>