IT-Swarm.Net

Google Haritalar Konteyner DIV genişliğini ve yüksekliğini% 100 olarak ayarla

Google Haritalar API v3’ü yükledim ve Google Map’i div biçiminde yazdırdım. Ancak genişlik ve yükseklik% 100 ve otomatik olarak ayarlandığında, Harita'yı göremiyorum.

İşte HTML kod pasajı.

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

Bu sorunu çözmenin bir yolu var mı?

55
BBKing

Tüm sayfayı kaplamak istiyorsanız tüm üst kapları% 100 genişliğe ayarlamanız gerekir. #Content div için en azından genişlik ve yükseklik için mutlak bir değer ayarlamanız gerekir.

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

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

Harita Kapsayıcısını hile yapmak için pozisyona ayarlamak. İşteHTML.

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

Ve BasitCSS.

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

Tüm tarayıcılarda test edilmiştir. İşte Ekran görüntüsü .

enter image description here

40
Madan Sapkota

Çok az insan css konumlandırmanın gücünü fark eder. Haritayı ana konteynerinin% 100 yüksekliğini kaplayacak şekilde ayarlamak için şunları yapın:

#map_canvas_container {position: relative;}

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

#Map_canvas_container içinde kesinlikle konumlandırılmayan öğeleriniz varsa, bunun yüksekliğini belirlerler ve harita tam olarak kullanılabilir alanı kaplar.

37
YaroslavS120

Bu benim için çalışıyor.

    <!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

Yüksekliği -webkit-fill-available olarak ayarlayabilirsiniz

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

Ebeveynlerinizin öğelerini etkileyemiyorsanız (iç içe geçmiş bileşenler durumunda olduğu gibi), onu tam bir pencere (= görünüm) yüksekliği yapacak şekilde height: 100vh kullanabilirsiniz;

0
YoniXw

Gmap, div'e göre satır içi stil konumunu yazar. Şunun üzerine yaz: 

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

Umarım yardımcı olur.

0
abhilashv