Карта Google не отображается в div

111
20

У меня есть div карты Google, который показывает, когда я определяю высоту в пикселях, но не как процент; в моих примерах я пытаюсь установить высоту на 100%.

Я прочитал несколько ответов SOF, которые предполагают, что родительские высоты div также должны быть установлены, что я сделал, нацелив на все родительские div карты в css, как вы можете видеть, но карта не отображается. Может ли кто-нибудь помочь?

Вот мой код, который работает:

            <div id="map-wrapper">
<div id="map-canvas"></div>
</div>


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


Вот мой код, который не работает:

            <div id="map-wrapper">
<div id="map-canvas"></div>
</div>


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

JavaScript:

        var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

спросил(а) 2021-01-27T21:22:13+03:00 4 месяца, 4 недели назад
1
Решение
77

Имейте в виду, что для высоты 100% вам необходимо установить все родительские элементы на высоту 100%.

В моем скрипаче 1 карта находится в html → body → div # map-wrapper → div # map-canvas. Каждый элемент должен иметь высоту 100%.

Поэтому в основном я просто добавил, что map-wrapper div для вашего css:

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

Ваш существующий css с #map-wrapper #map-canvas (обратите внимание на отсутствующую запятую!), Оставит окружающий div.

1 Я не добавил ключ api, чтобы вы получили предупреждение об ошибке, и для отладки я дал карте красный фон.

ответил(а) 2021-01-27T21:22:13+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема