blog alpha design joomla

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

Créez 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, 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.8 1 1 1 1 1 1 1 1 1 1 Notez cet article 4.80 (5 Votes)

Commentaires (6)

  1. Nicolas

    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 !

    1. Thierry Tardif    Nicolas

      Bonjour Nicolas,

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

      1. Jean-Marie FRANCOIS

        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

        1. Thierry Tardif    Jean-Marie FRANCOIS

          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.

          1. Rémi

            Bonjour,

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

            1. Thierry Tardif    Rémi

              Bonjour,

              Oui c'est normal

              Il n'y a pas encore de commentaire

              Ajoutez votre commentaire

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

              Ils nous ont fait confiance

              Universités & organismes de recherche

              L' INSERM - unité U999, Université Paris Sud - Centre Chirurgical Marie Lannelongue

              The Center for Groundwater Studies - Australie

              L 'ENSAE : École Nationale de la statistique et de l'administration

              La Maison des Sciences de l'Homme Paris Nord , UMS de l'université Paris 8, de l'université Paris 13 et du CNRS

              L' Institut Supérieur de Développement - ISD Flaubert

              Monpellier RIO imaging (MRI), plate - Forme Technologique (PFT), labellisée IBiSA.

              Organismes publics

              Ministère de la défense : État Major de la 3ème Brigade Mécanisée

              La mairie de la ville de Marly le Roi

              La mairie de la ville de Breuillet

              La mairie de la ville de Thuir

              L' Agence Locale de l'Energie de la métropole marseillaise

              L' Institut de Formation en Masso-kinésithérapie de Montpellier - Centre Hospitalié Universitaire de Bellevu

              Le Centre de Gestion de la fonction Publique Territoriale des Alpes de Haute Provence

              La Capitelle - couveuse d'entreprises du Gard

              Le Centre Social Intercommunal de Saint Quentin de la Poterie

              Le collège & lycée Saint Charles

              Le lycée Philippe Lamour

              Le centre François Baclesse: Centre de Lutte Contre le Cancer (CLCC)

              Entreprises

              Astrium une filiale EADS No 1 européen et No 3 mondial de l'industrie spatiale

              Messer France

              Photonlines

              Shânti Gestion

              App-Line

              Vincent et Mireille

              Axiom Information

              Galerie Art City

              Le Château de Boisson

              LM Control

              Vagabonde International

              Photonlines Energy

              la Pisciculture la Croisière

              FHSolution

              NaturEditions

              Etudions à l'étranger

              E.P.A.

              Microeconomix

              Alatak

              Jade Black Design

              Une bague une destinée

              Schmulb

              Espace revêtements

              Partenaire de réussite

              Stylitek

              Fun-Kart

              The Crew Coach

              Sanitval

              Ateliers d'écriture de Virginie Lou

              cam4you

              SDB+

              Armelle Bongrain - architecte d'intérieur

              ECIM

              Riveria Expat Consultants

              Florence Thorez - Diététicienne Nutritionniste

              Le Séchoir

              Le Moulin de Bouydou

              L' Espace de Formation Clinique et Psychanalytique

              Cours de musique à Montpellier

              Leads Planet

              Agerix

              Etudions à l'étranger

              Biopreserv

              Aloes RED

              InfoTour

              EverNew

              Synalabs

              Bureau d'Etudes Arlaud

              Stage de musique été

              Fermetures Neuvillaises

              Linguapolis

              Weblligence

              ASD Protect

              Véronique Crépaux - praticienne en Energétique Traditionnelle Chinoise

              Françoise Léon - Psychologue du comportement alimentaire

              Inovtolerie

              BlueSafe

              Viasocial

              Repco Marine

              King Jouet

              Dr Abbas - cabinet ORL

              ER3M

              Cryo'net

              Vectoring Talents

              Desir d'écrire

              Installation yperreault

              Viaortho

              Viadentiste

              Alice Sweet Home

              ONG / Associations

              UNESCO: International Music Council

              L' Association de Recherche en Soins Infirmiers

              L' Union Internationale Contre la Tuberculose et les maladies respiratoires

              Le Centre National des Risques Industriels

              L' Institut International des Hautes Études en Psychanalyse

              SurdiFrance : Association nationale de malentendants

              La fondation Internationale de l'Hôpital Albert ScMhweitzer à Lambaréné

              La Maison des Professions Libérales Ile de France

              Le Conseil National de l' Enseignement Agricole Privé

              La ligue Dauphiné Savoie de tennis

              Le Conseil Permanent Régional des Associations d’Environnement

              Le Syndicat des Podologues d'Île de France

              La compagnie aux grands pieds

              L'Espace de l'Ouest Lyonnais

               

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