Comment intégrer des cartes responsive design dans votre site web

Comment intégrer des cartes responsive design dans votre site web

Google Maps vous permet de facilement intégrer des cartes dans votre site web. Cependant, par défaut, ces cartes ne sont pas responsive design.

Dans ce tutoriel, je vais vous montrer comment rendre vos cartes responsive, en utilisant simplement quelques lignes de CSS. Cette technique fonctionnera avec Joomla!, Wordpress, Drupal ou n'importe quelle platform.

Obtenir le code d'intégration de Google Maps

  • Rendez-vous sur Google Maps.
  • Recherchez la carte que vous souhaitez intégrer sur votre site web.
  • Cliquer sur le lien "Partager ou intégrer la carte" :

partager-carte-google-maps

Partage carte Googla Maps

integrer-carte-google-maps

Intégration carte Google Map

  1. Choisissez "Intégrer la carte"
  2. Sélectionnez et copier le code iframe

Utiliser le code Intégrer

Coller le code sur votre site à l'endroit où vous souhaitez afficher la carte. Ce code doit ressembler à cela :

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386950.6511603643!2d-73.70231446529533!3d40.738882125234106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNueva+York!5e0!3m2!1ses-419!2sus!4v1445032011908" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Modifier le code Intégrer

Ajouter une balise div autour du code Intégrer la carte. Utiliser la class CSS carte-responsive afin que votre code ressemble désormais à cela :

Ajouter le CSS

Ajoutez maintenant les propriétés CSS suivante dans la feuille de style de votre site :

.carte-responsive{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } .carte-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; }

Votre carte est désormais responsive. Vous pouvez modifier la taille de votre navigateur ou afficher votre site depuis votre smartphone pour tester.

 

Attention : l'éditeur JCE n'accepte pas, par défaut, les balise Iframe. Si vous utilisez cet éditeur, vous devrez paramétrer JCE pour autoriser les Iframe.

La boutique

Trucs @ Astuces Joomla! 3Le livre 100 Trucs & Astuces pour Joomla! 3
vous permet de faire les bons choix parmi ceux qui s'offrent à vous lors de la création de votre site web ou lors de l'ajout de fonctionnalités ou d'extension grâce à de simple conseils, de vous simplifier la tâche grâce à des astuces et des mini-tutoriels pour gagner du temps dans la gestion de votre site Joomla!, ainsi que dans l'organisation de sa sécurité, son référencement, ses performances, et bien plus encore.

Note : cet article est une traduction de : Create Responsive Google Maps on Any Website

Notez cet article:
4
Comment réinitialiser Joomla! lorsque vous rencont...
Comment partager les mêmes utilisateurs entre 2 si...

Commentaires 1

 
ced1870 le lundi 18 janvier 2016 09:22

salut,
tu peux meme aller sur My Google Maps pour te créer des cartes persos :
https://www.google.com/mymaps/

et tu l'intègres pareil
CEd

salut, tu peux meme aller sur My Google Maps pour te créer des cartes persos : https://www.google.com/mymaps/ et tu l'intègres pareil CEd
Déjà inscrit ? Connectez-vous ici
Guest
dimanche 21 juillet 2019
Si vous souhaitez vous inscrire, veuillez saisir un nom d'utilisateur, mot de passe et nom.

Image Captcha

Sur ce site, nous utilisons des cookies.