J'ai essayé de le faire de différentes façons, mais la plus évidente est la suivante:Comment obtenir une carte google pour utiliser 100% de son conteneur parent?
var map2 = new GMap2(document.getElementById("map2"), {size:"100%"});
qui ne fonctionne pas.
À moins que vous spécifiez une taille explicitement la carte en utilisant GMapOptions dans le constructeur, la carte utilise implicitement la taille du conteneur à la taille elle-même.
donc définir la taille de votre conteneur de carte remplir tout l'espace disponible:
<div id="map2" style="width: 100%; height: 100%"></div>
Vous n'avez pas besoin d'ajouter la propriété width css. Parce que "div" est naturellement un élément de niveau bloc, il va remplir à la largeur de ses parents :) Bonne réponse si! – Alex
Parfait! J'essayais d'utiliser GSize qui ne prendrait pas un pourcentage. – Artilheiro
@Alex ... vous avez raison. Juste mettre là pour plus de clarté. – Keltex
Que diriez-vous calculer dynamiquement les dimensions de c'est conteneur parent et les mettre explicitement sur l'élément google map? En supposant que 100%/100% de hauteur ne fonctionne pas.
Je le fais aujourd'hui en utilisant jQuery. Cela fonctionne pour la plupart mais si l'utilisateur redimensionne la fenêtre, la carte ne le redimensionne pas. – Artilheiro
Spécification juste de la largeur: 100%; hauteur: 100% ne suffisait pas pour moi ...
Mais je l'ai eu de travail en utilisant le code BODY suivant:
<body onload="initialize()" style="margin:0px; padding:0px;">
Et en utilisant le code de la carte suivante:
<div id="map" style="width: 100%; height: 100%; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>
voir le résultat à http://arve.epfl.ch/test/
/shawn
<div class="some-pannel">
<div class="map-wrapper">
<div id="googleMap" style="width:100%;height:100%;"></div>
</div>
</div>
.some-pannel{
position: relative;
width: 123px;
height 321px;
}
.map-wrapper{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Cela devrait se faire automatiquement. Il y a probablement quelque chose d'autre qui interfère. Pouvez-vous poster du code, ou un lien? D'ailleurs, l'élément "size" que vous utilisez là doit être un GSize, qui est créé comme ceci: var size = new GSize (500,400); –
C'est ce que j'attendais aussi. La solution ci-dessous a résolu mon problème par un style en ligne sur le div lui-même. L'utilisation de GSize ne fonctionnait pas car elle ne prenait pas de pourcentage. Je vous remercie. – Artilheiro