• Centre de formation Joomla!
    Tutoriels et formation Joomla!
    Apprenez en vous formant à votre rythme, en toute liberté,
    créez votre propre site Web avec Joomla!

Tutoriel Logo Joomla Joomla

Rendre Responsive une carte Google

Afficher un emplacement très précis au moyen d'une carte Google dans un article (ou dans un module) est une fonctionnalité très appréciée des visiteurs qui peuvent ainsi vous localiser plus facilement. Seulement, les cartes Google ne sont pas responsive design, ce qui pose un souci pour les nombreux mobinautes. Nous allons voir au travers de ce tutoriel comment rendre responsive une carte Google affichée dans votre site Joomla.

Table des matières
- Le code Google
- L'ajout dans l'article
- L'ajout de la classe CSS

Le code Google

Ouvrez d'abord Google Maps.
Dans la barre de recherche, indiquez l'emplacement à afficher sur la carte (dans ce tutoriel, nous afficherons la carte de France).

Afficher une carte Google dans un article

Afin d'obtenir le code de cette carte, cliquez maintenant sur Partager.
Dans la fenêtre qui s'ouvre, cliquez sur l'onglet Intégrer la carte.

Afficher une carte Google dans un article

Faites un clic droit avec votre souris sur le code surligné en bleu dans l'image puis cliquez sur Copier.



L'ajout dans l'article

Ouvrez maintenant le panneau d'administration de Joomla.
Cliquez sur Contenu puis sur Articles et enfin sur Ajouter un nouvel article.

Afficher une carte Google dans un article

Afin de pouvoir ajouter le code de la carte Google que nous venons de copier, cliquez d'abord sur le bouton Basculer l'éditeur situé sous la zone de saisie du texte.

Collez maintenant le code de la carte Google dans la zone de texte. Indiquez un titre à votre article et ajoutez le à la catégorie de votre choix.

Afficher une carte Google dans un article

Nous allons maintenant modifier le code que nous venons de coller dans l'article.
Avant le code Google, ajoutez une balise div avec une classe carte-responsive.
N'oubliez surtout pas de fermer la balise div après le code de la carte Google.

Afficher une carte Google dans un article

Cliquez sur Enregistrer et fermer pour valider votre saisie.



L'ajout de la classe CSS

A partir du panneau d'administration de Joomla, ouvrez maintenant Extensions puis Templates.
Cliquez ensuite sur Templates dans la barre latérale de gauche.

Afficher une carte Google dans un article

Dans la liste des templates affichés, cliquez sur le nom de votre template (dans ce tutoriel nous utilisons le template Protostar).
Dans le dossier CSS, cliquez sur le fichier template.css. Le contenu de celui-ci s'affiche dans la partie centrale de la page.

A la fin du fichier template.css, copier et collez le code suivant :

/* Carte Google Responsive */
.carte-responsive {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; 
	height: 0; 
	overflow: hidden;
}
 
.carte-responsive iframe,
.carte-responsive object,
.carte-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Cliquez sur enregistrez et fermer pour valider votre saisie.

Affichez maintenant la page de votre carte Google et redimensionnez votre navigateur pour constater que le Responsive fonctionne correctement.


Note : le code CSS partagé dans ce tutoriel est le même que celui que j'ai utilisé pour le tutoriel Rendre une vidéo Responsive dans Joomla!.


 

1 1 1 1 1 1 1 1 1 1 Rating 0.00 (0 Votes)

web-eau.net is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is
used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.