Comment créer une Google Map responsive pour n'importe quel site ?
Les Google Maps sont très faciles à inclure dans un site.
Malheureusement, par défaut, elles ne sont pas responsives.
Dans ce court tutoriel, je vais vous montrer comment rendre votre Google Map responsive, en utilisant seulement quelques lignes CSS. Cette technique fonctionne avec Joomla, WordPress, Drupal ou n'importe quelle autre plateforme.
1. Obtenir le code d'insertion de Google Maps
- Rendez-vous sur Google Maps
- Faites un recherche pour trouver la zone de Google Maps que vous souhaitez inclure dans votre site
- Cliquez sur le lien Partager
- Cliquez sur Intégrer la carte
- Sélectionnez le code Iframe
- Faites un click droit et copier le code d'insertion
2. Utiliser le code d'insertion
Collez le code d'insertion dans votre site. Il ressemble à ceci :
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d92100.56867926556!2d4.272642858057628!3d43.832137558683186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12b42d0bd6e85339%3A0xde88134f9f200c03!2zTsOubWVz!5e0!3m2!1sfr!2sfr!4v1484817447856" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
3. Modifier le code d'insertion
Ajouter une balise <div> autour du code d'insertion. Utilisez la classe map-responsive, le code ressemble maintenant à ceci :
<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d92100.56867926556!2d4.272642858057628!3d43.832137558683186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12b42d0bd6e85339%3A0xde88134f9f200c03!2zTsOubWVz!5e0!3m2!1sfr!2sfr!4v1484817447856" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
4. Ajouter le CSS
Maintenant ajoutez les propriétés suivantes dans votre fichier CSS.
.map-responsive {
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
} .map-responsive iframe {
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
Votre Google Map est maintenant responsive. Redimensionnez votre navigateur pour le constater.
Cet article est la traduction de "Create Responsive Google Maps on Any Website" de Valentin Garcia.