google maps hauteur de 100% de la div parent

Est-il possible de faire une carte google hauteur de 100% de la div parent?
J'ai remarqué qu'avec la hauteur de 100%, la carte n'est pas visible, mais si j'ajoute la hauteur de la div avec la carte en pixels de la carte est correctement visualiser.
s'il y a des astuces pour parvenir à la carte 100% de la div parent?
cela ne fonctionne pas

<div class="block halfrect">
    <div id="map" style="height:100%;"></div>
</div>

cela fonctionne

    <div class="block halfrect">
        <div id="map" style="height:590px;"></div>
    </div>

une idée?

  • Comment êtes-vous de la connexion de la Carte? Utilisation d'iframe ou javascaript?
  • javascript, google api v3
  • post la solution que vous avez trouvé, et l'accepter comme réponse afin que d'autres puissent utiliser votre solution
  • J'ai ajouté ces règles à la div de la carte: "display: block; position:absolute; height:auto;" et fonctionne maintenant
  • Votre question semble similaire à celui-ci. Votre bloc halfrect classe n'a pas de hauteur associée avec elle, de sorte que la carte se remplit à 100% de rien. stackoverflow.com/questions/32927894/...
  • mon halfrect ont une hauteur, j'ai trouvé la solution au problème, comme je l'ai écrit avant... merci quand même

InformationsquelleAutor mattia | 2015-10-03
  1. 6

    référence: Mike Williams Google Maps Javascript API v2 page du tutoriel: Utilisation d'un pourcentage de la hauteur de la carte div

    Si vous essayez d'utiliser style="width:100%;height:100%" sur votre carte div, vous obtenez une carte div qui a une hauteur nulle. C'est parce que la div s'efforce d'être un pourcentage de la taille de la <body>, mais par défaut de l' <body> a une durée indéterminée hauteur.
    Il existe des moyens pour déterminer la hauteur de l'écran et de l'utilisation que le nombre de pixels de la hauteur de la carte div, mais une alternative simple est de changer le pour que sa hauteur est de 100% de la page. Nous pouvons le faire en appliquant style="height:100%" à la fois le <body> et la <html>. (Nous avons à faire à deux, sinon la <body> essaie d'être à 100% de la hauteur du document, et la valeur par défaut pour ce qui est d'une durée indéterminée hauteur.)

    extrait de code:

    JS:

    var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

}
google.maps.event.addDomListener(window, "load", initialize);

    CSS:

    html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

    HTML:

    <script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="block halfrect" style="height:100%">
  <div id="map" style="height:100%;"></div>
</div>

    InformationsquelleAutor geocodezip