web-dev-qa-db-fra.com

Définir la largeur et la hauteur du conteneur Google Maps DIV à 100%

J'ai chargé l'API Google Maps v3 et imprimé Google Map dans div. Mais lorsque vous définissez largeur et hauteur sur 100% et automatique, je ne peux pas voir la carte.

Voici l'extrait de code HTML.

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

Y at-il un moyen de résoudre ce problème?

cssgoogle-mapsgoogle-maps-api-3css-positiongoogle-maps-api-2
55
BBKing

Si vous souhaitez couvrir toute la page, vous devez définir une largeur de 100% pour tous les conteneurs parents. Vous devez au minimum définir une valeur absolue en largeur et en hauteur pour la div #content.

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

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

Définir le conteneur de carte pour qu'il se positionne sur relatif. VoiciHTML.

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

Et SimpleCSS.

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

Testé sur tous les navigateurs. Voici la Capture d'écran .

enter image description here

40
Madan Sapkota

Très peu de gens réalisent la puissance du positionnement css. Pour que la carte occupe 100% de la hauteur de son conteneur parent, procédez comme suit:

#map_canvas_container {position: relative;}

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

Si vous avez des éléments non absolument positionnés dans #map_canvas_container, ils en définiront la hauteur et la carte occupera exactement l'espace disponible.

37
YaroslavS120

Ce travail pour moi.

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

Vous pouvez définir la hauteur sur -webkit-fill-available

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

Si vous ne pouvez pas affecter vos éléments parents (comme dans une situation de composants imbriqués), vous pouvez utiliser height: 100vh qui en fera une hauteur de fenêtre complète (= vue);

0
YoniXw

Gmap écrit la position du style en ligne par rapport au div. Remplacez cela par: 

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

J'espère que ça aide.

0
abhilashv