Sélectionnez votre langue

Dans ce tutoriel, nous allons apprendre comment intégrer une carte Google de manière responsive, c’est-à-dire qu'elle s'adaptera en fonction de la taille de l'écran sur laquelle est affichée la carte. Les sites web de nos jours sont consultés en grande partie sur les mobiles donc il est important de faire en sorte que votre site s'adapte à tous les écrans. De plus il est toujours intéressant de savoir mettre un iframe dans un article.


Tout d’abord, il vous faut un iframe que vous pouvez récupérer sur Google maps, choisissez l’endroit que vous souhaitez montrer sur votre carte et copiez l'iframe.Maps google, copiez le lien iframe

Map Google

Ensuite, dans votre article collez votre iframe./!\ Selon l’éditeur de texte, il se peut que vous rencontriez des problèmes. Dans ce cas-là, vous pouvez désactiver l’éditeur par défaut de Joomla en allant dans Système > Configuration global. Trouvez le champ Editeur par défaut et changer le par Éditeur - Non WYSIWYG ou sinon je vous conseille de télécharger l’éditeur JCE, beaucoup plus performant.

Collez votre iframe entre une balise div avec comme class : map-responsive : <div class='map-responsive></div>Code HTML

Code html sur l'éditeur non WYSIWYG

Une fois votre code collé, enregistrez & fermez votre article et suivez Système > Templates du Site. Puis cliquez sur votre template, on va y ajouter un peu de css. Allez dans votre fichier de style ici user.css mais peut-être aussi appelé custom.css et collez le code ci-dessous :

.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;
}
 
Code css sur un fichier du template pour rendre la map google responsive.

Ficher css du template

Enregistrez & fermez

Et voilà vous avez maintenant une carte Google qui s’adaptera à toutes les tailles d’écrans !

Un problème avec votre site internet

Vous rencontrez une difficulté lors de la création de votre site

Joomla!, Wordpress et Prestashop

Nos experts vous accompagne pour trouver une solutions.

helps joomla
On vous aide sur votre site Joomla!.