Passer au contenu principal

Une carte Google Maps sur votre site web

Comment ajouter une care Google Maps sur une page de votre site web UNIL

Pour un site WordPress UNIL

Cet ajout d'une carte Google Maps va s'effectuer à l'aide d'un iframe, que l'on peut insérer dans une page sous forme de bloc "code court".

1. Activer l'extension iframe et insérer un bloc "widget - code court" à l'emplacement où vous souhaitez ajouter la carte

image-1587482755176.png

2. Aller sur https://www.google.ch/maps et rechercher l'adresse souhaitée (dans notre exemple, l'adresse de l'Internef), puis choisir partager et intégrer une carte

3. Copier le contenu HTML

image-1587483395433.png

4. Ouvrir un éditeur de texte (TextEdit, Bloc notes, Word...) comme presse-papier temporaire et y coller le contenu HTML

5. Sélectionner précisément la partie du contenu HTML illustrée ci-dessous et la copier

image-1587483922732.png

6. Coller ce contenu dans la syntaxe d'appel du code court nécessaire pour l'iframe: [iframe src= ... ]

image-1587484114168.png

7. Copier-coller le code court avec son contenu dans le bloc "widget - code court" et mettre à jour la page

image-1587484629800.png

Problème connu: cette méthode ne tient pas compte des dimensions spécifiées dans le code HTML de l'iframe. La carte va occuper toute la largeur de la colonne dans laquelle elle est insérée, et on ne peut pas agir sur sa hauteur.

Pour un site Jahia UNIL

Cet ajout d'une carte Google Maps va s'effectuer à l'aide d'un iframe, dont le code source va être fourni par Google Maps et inséré dans une boîte Jahia "contenu standard".

1. Sur la page qui devra affiche la carte, créer une boîte de contenu standard

image-1587549831393.png

2. Aller sur https://www.google.ch/maps et rechercher l'adresse souhaitée (dans notre exemple, l'adresse de l'Internef), puis choisir partager et intégrer une carte

3. Copier le contenu HTML

image-1587483395433.png

4. Dans la boîte de contenu standard, passer en mode "code source"

5. Coller le contenu HTML provenant de Google Maps et sauvegarder

image-1587551278650.png