Extensible en hauteur

Version imprimable

23/12/2008, 18h26
DeTeR

Extensible en hauteur

Bonjour,

Je voudrai savoir comment rendre Google Map Api extensible en hauteur.
J'utilise pourtant les pourcentages pour les dimensions de la div :

Code:

<div id="map" style="width:100%;height:100%"></div>

Mais ma carte occupe juste toute la largeur et pas toute la hauteur,
elle est aplatie et non extensible en hauteur.

Merci

Cordialement.
23/12/2008, 18h35
Bovino

Regardes du coté de checkResize().

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
 
window.onresize = resize;
 
 
//----------
// Resizing of the map
//----------
function resize() {
 var height = document.documentElement.clientHeight;
 map2 = document.getElementById("map");
 map2.style.height = parseInt(height) - 70 + 'px';
}
 
 
...
 
</script>
</head>
 
<body onload="load()" onunload="GUnload()">
 <div id="map" style="width:100%; height:630px;" ></div>
</body>

15/01/2009, 12h16
DeTeR
Citation:
Envoyé par danhub

Code:

1 2 <div id="map" style="width:100%; height:630px;" ></div>
Merci pour la réponse mais je veux que la map prenne 100% de ma div en hauteur sans lui attribuer une hauteur fixe de base telle que "height:630px". Le "height:100%;" m'applatie ma map :cry:.

Est-ce Possible que la map se resize automatiquement à l'ouverture de ma page ?:roll:
Merci de votre aide.
28/01/2009, 16h31
danhub

Non, pas possible, obligé de le faire "manuellement" en changeant la taille de la fenêtre.

A ce moment, la map prendra la hauteur que tu veux (en renseignant correctement le nombre de pixels)
05/02/2009, 11h41
DeTeR

Citation:

Envoyé par danhub

Non, pas possible, obligé de le faire "manuellement" en changeant la taille de la fenêtre.

A ce moment, la map prendra la hauteur que tu veux (en renseignant correctement le nombre de pixels)

Salut danub et merci pour ton aide :).

Mais d'après le site de google map http://maps.google.com c'est tout à fait possible de rendre la map extensible en hauteur et en largeur :mouarf: .
Mais bon c'est la map de Google il faut dire donc je pense qu'ils ont les développeurs pour :?.
Je vais essayer de voir comment il y arrive :aie:
Merci encore.

CSS

Salut,

Essaie cette solution CSS; ok pour moi avec IE6+, FF, Chrome:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<style>
 <!--
      html, body {
           height: 100%;
           padding:0;
           margin:0
      }
 
      #map1 { 
           min-height: 100%;
      }
 
      * html #map1 {  /* hack pour IE 6 qui ne supporte pas bien min-height */
            height:100%
       }
 //-->
 </style>
 
</head>
<body onload="load() /*chargement de GMap */">
       <div id="map1" ></div>
</body>