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.8125 1 1 1 1 1 1 1 1 1 1 Notez cet article 4.81 (8 Votes)

Commentaires (7)

  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!

                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

                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 Camayeux

                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