Written by Dans cet article, nous voyons comment intégrer dans votre site des cartes Google Maps en responsive design.
Comment intégrer des cartes responsive design dans votre site web Voici comment intégrer dans votre site des cartes Google Maps en responsive design. 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 » :
Partage carte Googla Maps
Intégration carte Google Map
Choisissez « Intégrer la carte »
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 :
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.
{loadposition pub-100-trucs-astuces}
Note : cet article est une traduction de : Create Responsive Google Maps on Any Website Crédits photo
Image by Free-Photos from Pixabay