it-swarm.com.ru

Установите ширину и высоту контейнера Google Maps DIV на 100%

Я загрузил Google Maps API v3 и распечатал карту Google в div. Но когда я установил ширину и высоту на 100% и автоматически, я не вижу карту.

Вот фрагмент кода HTML.

<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>

Есть ли способ исправить эту проблему?

55
BBKing

Вы должны установить все родительские контейнеры на 100% ширины, если вы хотите покрыть ими всю страницу. Вы должны установить абсолютное значение по ширине и высоте для #content div как минимум.

body, html {
  height: 100%;
  width: 100%;
}

div#content {
  width: 100%; height: 100%;
}
63
Machiel

Установка Map Container в положение относительное делает свое дело. ВотHTML.

<body>
    <!-- Map container -->
    <div id="map_canvas"></div>
</body>

И SimpleCSS.

<style>
html, body, #map_canvas {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map_canvas {
    position: relative;
}
</style>

Проверено на всех браузерах. Вот Скриншот .

enter image description here

40
Madan Sapkota

Очень немногие люди осознают силу позиционирования CSS. Чтобы карта занимала 100% высоты родительского контейнера, сделайте следующее:

#map_canvas_container {position: relative;}

#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

Если внутри #map_canvas_container есть какие-то не совсем позиционированные элементы, они установят его высоту, и карта займет точно доступное пространство.

37
YaroslavS120

Эта работа для меня.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 

#cont{
    position: relative;
    width: 300px;
    height: 300px;
}
#map_canvas{
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
</style> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=APIKEY"></script>
<script type="text/javascript">
function initialize() {
    console.log("Initializing...");
  var latlng = new google.maps.LatLng(LAT, LNG);
    var myOptions = {
      zoom: 10,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
}
</script>
</head>

<body onload="initialize()">
<div id="cont">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
</body>
</html>
2
Mostafa

Вы можете установить высоту -webkit-fill-available

<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
0
Naresh Chennuri

Если вы не можете повлиять на родительские элементы (как в ситуации с вложенными компонентами), вы можете использовать height: 100vh, что сделает его высотой полного окна (= view);

0
YoniXw

Gmap записывает позицию встроенного стиля относительно div. Перезаписать это с помощью: 

google.maps.event.addListener(map, 'tilesloaded', function(){
    document.getElementById('maps').style.position = 'static';
    document.getElementById('maps').style.background = 'none';
});

Надеюсь, поможет.

0
abhilashv