Discussion :

[fanfouer]

Bonsoir à tous,

Je commence tout juste à apprécier correctement le fonctionnement de la nouvelle version de l'API GMaps mais je suis actuellement agacé par un problème d'affichage que je n'arrive pas à résoudre.

Concrètement, j'intègre une carte au sein d'une interface possédant de nombreux contrôles accessibles à l'utilisateur. J'ai donc une div particulière dans laquelle viens se loger la carte dans un endroit de cette interface.
J'ai lu à plusieurs endroits que cette div passée au constructeur de la carte devait avoir de préférence des dimensions fixes pour que l'API puisse opérer correctement.
Voici donc le style CSS que je lui applique, pour ma part la hauteur est fixe mais pas la largeur :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
.app-webVRD-gMapsContainer {
	background-color:#FFFFFF;
	height:600px;
	min-height:600px;
	width:100%;
	min-width:100%;
}

Et en pièce jointe vous pouvez trouver ce qui est affiché une fois sur deux (dans certains cas l'affichage se fait sans problèmes, au gré des rafraichissement de la page).
Comme on peut le voir, les éléments tels que le logo Google ou le lien vers les CGU sont bien en bas et occupent la hauteur souhaitée. Mais pourquoi la carte n'en fait-elle pas de même?
Si je drague le tout, les dalles disparaissent environ à mi-hauteur.

Voici en gros le code de construction de la carte :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<script type="text/javascript">
this._MAP = new google.maps.Map(document.getElementById("google_container"), {
        "center": center,
        "disableDoubleClickZoom":true,
        "mapTypeControlOptions" : {
                "style":google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        "mapTypeId":google.maps.MapTypeId.ROADMAP,
        "overviewMapControl":true,
        "overviewMapControlOptions" : {
                "opened":true
        },
        "scrollwheel":true,
        "streetViewControl":true,
        "zoom":6
});
</script>
 
<div id="google_container" class="app-webVRD-gMapsContainer"></div>

Vous pouvez avoir un aperçu de l'application ici, mais sous réserves puisque je travaille dessus en live actuellement, des erreurs peuvent apparaitre.

Quelqu'un a-t-il une idée d'où viens le problème? Est-ce un problème connu?

Merci d'avance pour vos réponses