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

[adokara]

j'ai le même problème, as tu trouvé la solution ? merci

[fanfouer]

Non je ne trouves pas de solutions (sinon je serait venu la poster ici).

Le dernier détail que j'ai remarqué est que lorsque cela surviens (presque une fois sur deux), il suffit de redimensionner la fenêtre en hauteur et la carte apparait à nouveau sur la totalité de la surface du conteneur.
J'aimerai trouver quelque chose de plus fiable sans avoir à toucher à la heuteur de la fenêtre du client (qui peut déjà être maximisée).

[bplus]

Voici un bout de code qui permet de recharger la carte, et aucun problème d'affichage.

Code :

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

$('#map_canvas').animate({marginTop: "0",opacity: 'show'}, 700, function() {initialize();});

Le sujet date de 2008 (soit il y a 5 ans), mais vaut mieux tard que jamais.

Cordialement

Brian