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.6666666666667 1 1 1 1 1 1 1 1 1 1 Notez cet article 4.67 (3 Votes)

Commentaires (2)

  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

      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