API Google Maps - iOS

Bonjour,

Je suis en train de développer une déclinaison mobile d'un site internet qui contient pas mal de cartes Google Maps

En testant sur Safari Mobile j'ai eu la surprise de voir un bug lors du clic sur les marqueurs de ma carte, en fait la zone cliquable du marqueur ne fonctionne pas sur iOS il faut cliquer ailleurs, cela est apparemment du à la CSS, la carte google Maps devant a priori être en "position: absolute" pour que le comportement soit correct ...

Mais de mettre ma div en position:absolute me casse toute ma mise en page, y a t'il un moyen de passer outre.

Je peux fournir l'URL en privé pour ceux désireux de m'aider à résoudre ce problème

Merci d'avance

Bonjour,

Je n'ai pas le temps de faire les recherches adéquates, alors je dis ça totalement au hasard : est-ce qu'en mettant le div en position:relative ça fonctionne?

en mettant en relative, cela place le div au bon endroit mais la fonctionnalité "infobulle" en cliquant sur mes icones ne marche plus correctement (la zone cliquable est décalée sur iOS Safari Mobile)

Est-ce que tu utilises bien le Google Maps JavaScript API V3?

Si oui, il faudrait vérifier dans la F.A.Q. si ce navigateur/système d'exploitation est supporté.

J'aimerais vraiment pouvoir t'aider, mais je n'ai pas iOS Safari Mobile.
Modifié par Tony Monast (05 May 2011 - 14:52)

J'utilise bien la v3 de l'API Google Maps et a priori celle-ci est supportée par Safari Mobile ...

Un bon départ serait de vérifier si les démos ou des cartes sur d'autres sites fonctionnent correctement sur Safari Mobile. Si c'est le cas, c'est que le problème vient de ton côté.

J'ai deja fait cette verification et c'est pour cela que j'ai trouvé que cela venais de la CSS et du fameux position:absolute, j'ai testé depuis ce script là

http://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/examples/infowindow-simple.html

J'y vais une nouvelle fois à l'aveuglette. D'après tes explications, il faut absolument que le div de Google Map soit en absolute. Comme j'ai utilisé cet API qu'une ou deux fois, je ne peux pas confirmer si c'est bien la chose à faire. Alors dans ton cas, j'essayerais ceci :

<div id="conteneur">
<div id="GoogleMap">...</div>
</div>

Tu mets le div conteneur en position relative et tu le positionnes normalement dans ton interface. Tu mets ensuite le div GoogleMap en absolute qui se placera donc par rapport au div conteneur. Théoriquement, ça devrait régler le problème.
Modifié par Tony Monast (05 May 2011 - 15:17)

le probleme c'est que ma GoogleMap sort du flux et donc n'est pas "contenu" dans sont conteneur a cause du "relative non ?

La position:absolute sort l'élément du flux, mais pas la position:relative. En mettant Google Map (position absolute) dans un div supplémentaire (position relative), la Google Map sortira du flux, mais se positionnera relativement au div supplémentaire qui est en position relative. Ce div supplémentaire lui, ne sortira pas du flux, car il est en position:relative.

Tu comprends où je veux en venir?

oué je pense comprendre le raisonnement mais ca ne fonctionne pas en tout cas sur Safari Mobile :s