Intégrer Google Maps

Intégrer Google Maps
pour votre site WordPress
sur l’infrastructure du Centre informatique de l’UNIL
Version 2.0 - septembre 2016
En bref
WordPress ne permet pas l’intégration directe de cartes issues de
Google Maps. Pour y arriver, nous allons avoir besoin de :
•
utiliser le plugin iframe sous la forme d’un shortcode
•
extraire certaines informations de Google Maps
2
Activer iframe
iframe est disponible dans vos extensions (plugins) :
S’il n’est pas activé, l’activer.
Exemple de shortcode, qui peut être copié
sur votre page.
3
Shortcode et paramètres
Le shortcode de iframe prend la forme suivante, où url correspondra
à l’adresse de la ressource Google Maps :
[iframe src="url"]
De nombreux paramètres sont disponibles, par exemple :
[iframe src="url" width="600" height="500"]
Une liste complète des paramètres est consultable à l’adresse :
https://srd.wordpress.org/plugins/iframe/other_notes/
4
Récupérer l’adresse Google Maps (1)
Paramétrez votre carte (lieu, trajet, etc.), puis cliquez sur l’icône du menu :
1. Accéder au menu
5
Récupérer l’adresse Google Maps (2)
3. Sélectionner Intégrer la carte
2. Cliquer pour accéder
aux options de partage
4. Copier le contenu du champ
6
Récupérer l’adresse Google Maps (3)
Dans le champ copié, il faut récupérer l’adresse de la ressource Google
Maps. Il s’agit de l’url après le paramètre "src". Copiez cette adresse :
<iframe src="https://www.google.com/maps/embed?pb=!
1m14!1m12!1m3!1d12970.145694578006!
2d6.631348903521074!3d46.51597715883148!2m3!1f0!
2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sch!
4v1474968677188" width="600" height="450"
frameborder="0" style="border:0" allowfullscreen></
iframe>
Cette opération peut être réalisée dans un éditeur de texte, par ex. Notepad
ou Textedit.
7
Insérer le shortcode iframe
Veillez à utiliser l’option "Coller en texte"!
1. Insérer le shortcode sur votre page en remplaçant le paramètre src avec l’url de Google Maps
8
2. Enregistrer la page, la carte
Google Maps devrait maintenant
s’afficher!