blog alpha design joomla

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

Comment 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.8333333333333 1 1 1 1 1 1 1 1 1 1 Notez cet article 4.83 (9 Votes)

Commentaires (9)

  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

              1. Caroline

                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!

                1. Etniqs

                  INCROYABLE

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

                  Bravo Mônsieur
                  Chapeau bas

                  1. Thierry Tardif    Etniqs

                    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

                    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.

                    Le Laboratoire d'Excellence Dispositif de Recherche Interdisciplinaire sur les Interactions Hommes-Milieux (LabEx DRIIHM) - CNRS -INEE

                    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

                    Françoise Léon

                    Inovtolerie

                    BlueSafe

                    Viasocial

                    Repco Marine

                    King Jouet

                    Dr Abbas

                    ER3M

                    Cryo'net

                    Vectoring Talents

                    Desir d'écrire

                    Dr Girardin

                    Installation yperreault

                    Viaortho

                    Viadentiste

                    Alice Sweet Home

                    Cannes property services

                    La méthode Silva

                    Les outils du mieux être

                    Pinceaux et Camaïeux

                    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

                    Les Courants d'Airs

                     

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