Google Maps responsive et valide au W3C !

google-maps-responsive-et-valide-au-w3c-



311 vues

Comment rendre Google Maps responsive et valide...!?

Bonjour à tous, aujourd’hui je vais brièvement parler du Google maps de Google adaptable au site web « from Scratch » ainsi qu’à la validation du W3C de cette balise (même avec l’HTML5).

Excédé par cette frustration de ne pas voir son code valide à cause d’une balise <iframe>, j’ai décidé de me pencher sur le problème de fond en comble. A commencer par comprendre pourquoi ? Le problème vient de terme obsolète (donc plus utilisé).

Tout se base à cause de 4 valeurs :

scrolling="no"marginheight="0px"marginwidth="0px"frameborder="0"

Pour remédier à ce problème, vous pouvez supprimer les : scrolling="no" , marginheight="0px" et marginwidth="0px" qui ne servent plus…voir dans de très rares cas… La petite dernière est la : frameborder="0" qui vous l’aurez deviné sert à mettre la bordure à 0. Peut être utile. Dans ce cas, il faut la remplacer par la propriété de feuille de style: style="border:0px solid transparent;" Simple, efficace, et les clients sont contents..

Je vais maintenant vous parler du responsive ! J’utilise actuellement le twitter bootstrap qui intègre très bien les bases du responsive . Le problème est le suivant : Le code fournit par google maps est statique ! Ce qui donne un décalage pas sympa sur les tablettes et les mobiles.

La solution ? Supprimer le width="425" qui se trouve dans le code et le remplacer par une propriété de feuille de style  de type “width” : style="width:100%;".

C’est tout !!? Et bien pourtant oui. Vous pouvez aussi essayer le max-width :100% qui donne pas forcément de bon résultat.

Voici en résumé le code HTML valide et compatible pour un site from scratch. Responsive ou pas.

 

<!-- Google maps valid and responsive by Breith Barbot. Comment: scrolling="no" marginheight="0px" marginwidth="0px" . Desktop, Tablet, Mobile. -->

<iframe height="300" style="width:100%;border:1px solid #CCC;" src="https://maps.google.fr/maps?hl=fr&amp;ie=UTF8&amp;t=m&amp;ll=43.836415,4.359984&amp;spn=0.010834,0.024419&amp;z=15&amp;output=embed"></iframe>