blog alpha design joomla

Le blog d' Alpha Design Joomla et autres ...

Comment créez une Google Maps 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, WordPresse, 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 

 google maps responsive 1

  1. Cliquez sur Intégrer la carte
  2. Sélectionnez le code Iframe
  3. Faites un click droit et copier le code d'insertion 

google maps responsive 2

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>

3. 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.

4.6923076923077 1 1 1 1 1 1 1 1 1 1 Notez cet article 4.69 (13 Votes)

Commentaires (9)

This comment was minimized by the moderator on the site

Je me suis creusé la tête pendant pas mal de temps avant de trouver un code qui fonctionne ! Merci pour ce tuto il est bien fait et fonctionne nickel !

This comment was minimized by the moderator on the site

Bonjour Nicolas,

Content de savoir que ce tuto vous a été utile

This comment was minimized by the moderator on the site

Bonjour, et merci pour ce tutoriel. Je voudrais juste savoir quand je vais mettre a jour mon thème, si ça ne va pas faire sauter mes codes dans le fichier CSS. Merci al'avance

This comment was minimized by the moderator on the site

Bonjour,

Si vous avez fait les modifications directement dans le fichier css de votre theme alors oui vous pourriez perdre vos modifications si la mise à jour de votre theme inclus des modifications à ce fichier.

This comment was minimized by the moderator on the site

Bonjour,

La map est responsive, mais il ne reste pas centré lorsque l'on modifie la taille....
Est ce normal?

This comment was minimized by the moderator on the site

Bonjour,

Oui c'est normal

This comment was minimized by the moderator on the site

Je travaille sur Wix (eh oui), j'y ai intégré une map personnalisée de Google. N'ayant pas accès au CSS, j'ai inclus un div dans lequel j'ai inséré un style avec tous les éléments de ton CSS. Même chose pour mon iFrame... Le résultat n'est pas bon, en fait il est inexistant au niveau du responsive... En plus, j'avais mis une hauteur et une largeur fixent et je les ai enlevé alors je me retrouve avec une scroll bar pour la hauteur. Auriez-vous une piste pour moi? Voici mon code:

<div style="overflow:hidden; padding-bottom:56.25%; position:relative; height:0;">
<iframe src="https://www.google.com/maps/d/embed?mid=1bGcmmJp5JjaT7sFW5s9RwlpRTY8" style="border:0; margin:0; left:0; top:0; height:100%; width:100%; position:absolute; padding:0;"></iframe></div>

Merci!

This comment was minimized by the moderator on the site

INCROYABLE

Enfin qq'un qui sait faire, sans copier/coller le discours complet de Google developper !!!

Bravo Mônsieur
Chapeau bas

This comment was minimized by the moderator on the site

Merci mais tout le crédit revient à Valentin Garcia : l'auteur de ce tuto https://www.ostraining.com/blog/coding/responsive-google-maps/ dont je n'ai fait que la traduction

Il n'y a pas encore de commentaire

Ajoutez votre commentaire

Pièces jointes (0 / 3)
Share Your Location

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour notamment réaliser des statistiques de visites