CSS Google Map
Salut les filles,

j'ai un petit problème CSS à résoudre

Je suis en train de développer la v2 du site de la collectivité ou je bosse.
Il y a une déclinaison mobile de ce site via @media (max-width: 640px)

sur pas mal de page j'utilise l'API Google Maps v3 afin d'afficher des cartographies réalisées avec nos données.

Sur la version desktop aucun soucis.
Sur la version mobile par contre a priori il y a un petit bug sur iOS (Safari mobile)

En gros pour que mes icones de ma Google Maps soit bien cliquable de bonne manière il me faut ce code CSS sur la div contenant la map

#MaDivContenantMaMap
{
width:280px;
height:auto;
position:absolute;
bottom:0;
}

(ce code est uniquement dans ma media queries "mobile" on est d'accord)

Donc avec ce code ma Google Maps est bien fonctionnelle sur iOS, pas de soucis, par contre au niveau de mon affichage elle viens me defoncer mon site en version mobile en se foutant par dessus tout ...

je n'arrive pas à la mettre a l'endroit voulu et que la fonctionnalité google maps sur mobile ne prenne pas un coup ...
je ne sais pas si je suis bien clair :s

j'y connais pas grand chose mais des fois les idées les plus cons fonctionnent...

tu ne peux pas caler ta div par rapport au haut de la page ?

#TaDivContenantTaMap
{
width:280px;
height:auto;
position:absolute;
top: laHauteurDuContenu;
}


'fin bon je dis ça mais je pense que tu as déjà testé et en l'écrivant je suis quasi sur que c'est pas la solution...

en mettant un top different de 0, je me retrouve avec mon bug de mes icones dans google maps qui ne sont pas cliquable ... en plus de ca, #MaDivContenantMaMap ne passe pas dans le flux classique et du coup s'affiche au dessus de tout ca et passe par dessus le contenu qui suit.

j'ai essayé de foutre des "clear:both un peu partout sans succès

des p'tits screenshots pour mieux comprendre ce ne serait pas de trop

j'en doute pas mais entre les tests depuis un iphone qui n'est pas a moi et un site que je ne peux pas trop diffuser ... :s

remplace ton position:absolute; par un float:left;
mais ouai un screenshot ou un lien ça serait pas du luxe ;)

j'aurais penser comme nanook, perso.

et si ça n'aurait pas marché, j'aurais fait comme toi, a savoir demandé ici.

(merci pour cette intervention de haute voltige, gUY... tu donnes de faux espoirs par notification interposé)

en foutant un float:left, mon affichage est correct dans google maps mais mes icones ne sont plus cliquable et n'affiche donc pas mes infobulle en fait c'est la zone cliquable qui a l'air de se deplacer vers le haut car si je clique environs 150 px plus haut que mon icone il m'affiche l'infobulle

c'est a rien y comprendre surtout que a priori ca fonctionne sur Android

je virerai le lien asap

a ouvrir depuis un mobile iOS pour voir le pb

dans ce cas nanook top:HauteurDuContenu; pas dans cette div là..

hmmm et si tu plaçais ta div dans une div ?
ead :

<div id="conteneur">
<div id="tamapgoogle"> </div>
</div >

#conteneur {float:left;}
#tamapgoogle {width:280px; height:auto; position:absolute;bottom:0; }

non ?
edit> des fois en louvoyant ça passe ^^

f5 , je viens de tenter mais le fait que l'autre soit en absolute le fait sortir du "flux" et donc ne le fou pas a l'interieur de ma div non ?