Date de la dernière modification: 14 avril 2025 et commencé en mars 2025
J’explique ici comment mettre en place, sous WordPress Elementor (voir par exemple Introduction: Mes premiers pas avec WordPress Elementor), un document intégrant des cartes Google Maps!
Dans cette “démonstration” on comprendra sa possible utilisation pour préparer un futur voyage voire en décrire son histoire au retour!
Son utilisation sur Smartphone n’est pas transcendant et l’édition du document WordPress impossible!
Dans Elementor, on ajoutera un Container et à l’intérieur un bloc Wordress Général </> HTML.
On lancera Google Maps https://www.google.ch/maps/ et on choisira Oman!
On zoomera correctement et on se déplacera sur la carte pour obtenir la vision de présentation souhaitée!
En cliquant sur Partager, dans le menu à gauche en haut sous le lieu Oman, on choisira Intégrer une carte et le menu COPIER LE CONTENU HTML qui poussera du code iframe correspondant à la carte dans le presse-papier! L’élément du container contient en haut à droite le bouton “Modifier en HTML” (donc Ctrl-V).
J’ai choisi un circuit à Oman (Site Wikipedia d’Oman) dont voici sa carte générée avec le principe décrit ci-dessus et le code HTML iframe intégré:
Sur PC la molette avec Ctrl fonctionne bien pour zoomer. On peut le faire aussi avec les deux boutons de la souris ou le +/- sur la carte.
En bas à gauche on peut changer de type de carte!
Toutes les cartes Google Maps intégrées ici ne permettent pas de consulter par exemple un site d’hôtel et faire une réservation! Il faudra utiliser son smartphone ou PC!
Cependant le menu Agrandir le plan sur la carte ici en haut à gauche, ou Plus d’options sur celles ci-dessous , nous permettent d’accéder à l’application Web Google Maps traditionnelle et à cet endroit (format carte ou destination).
De Mascate à Nakhal
La procédure est presque aussi simple!
Il faut choisir le départ (Mascate, Oman) et l’arrivée (Nakhal, Oman) après avoir sélectionné le bouton Itinéraire!
Dans notre cas nous choisirons Voiture et zoomerons la carte correctement!
Il faudra ensuite cliquer sur le trois barres hamburger tout en haut à gauche et choisir le menu Partager ou Intégrer la carte!
La même procédure décrite ci-dessus est valable: Dans Elementor j’ajoute un Container et à l’intérieur un bloc Wordress Général </> HTML.
On peut évidemment zoomer sur la carte pour trouver des restos, cafés, gift shops, supermarchés, hôtels ou autres repères et coins tranquilles comme des jardins, plages ou des mosquées!
De Mascate à Wadi Tiwi en passant par Bimmah Sinkhole
On a ici choisi deux destinations.
De Wadi Bani Khalid à Wahiba Sands
Pas de routes, c’est le sable dans le désert.
De Wahiba Sands à Nizwa
Sur Google Maps, il n’y a pas de route ni de chemin entre ces deux destinations.
C’est impossible de créer une vrai route visible. On est obligé de commencer par exemple à Qarayah Qata!
De Nizwa à Mascate en passant par Birkat Al Mouz Djebel Akhdar
C’est parfois un peu la croix et la bannière, voire un petit jeu, lorsqu’il faut ajouter des étapes de destination sous Google Maps.
Ce travail se fera sur un PC, c’est logique!
Après avoir défini un départ et une arrivée, nous pouvons avec le (+) Ajouter des destinations, soit avec le nom, soit un cliquant sur un point de la route ou même en dehors.
Dans la liste des étapes, à gauche du nom de l’étape et du petit rond o apparaîtra une “main” qu’on pourra déplacer à souhait en haut ou en bas afin de faire passer cet endroit dans un autre ordre! Les changements apparaîtront sur la carte. Tout à la fin on pourra regénérer notre code iframe.
Souvent on étudie les parcours d’autres voyagistes et on pourra se faire une vraie idée des diverses possibilités. Magnifique!
Le fort de Bahla et Google Street View
Sur la carte ci-dessus nous voyons Bahla où il y a un Fort! Donc notre parcours n’est pas encore top!
Depuis la carte sur Google Maps nous irons à Bahla et activerons le bouton en bas à droite de Street View.
Les routes sont indiquées en bleu clair et on cherchera le Fort en naviguant en 3D sur la route (molette et bouton gauche de la souris)!
J’ai même réussi, sur certaines routes bleues Street View dans le désert, à y découvrir des départs de pistes!
Il y a toujours le bouton en haut à droite Partager ou Intégrer la carte! C’est le même principe: on poussera du code iframe dans le presse-papier et le résultat est cool:
Retour d’un récent voyage
Au retour de notre dernier voyage à Londres, il m’est venu à l’idée de présenter des buts de balades dans cette ville grandiose.
J’ai donc fait un album Google présentant Londres sous forme de promenades, en indiquant les lieux visités et les stations de métros!
La balade ci-dessous est expliquée dans l’album avec photos et on pourrait la consulter d’abord!
C’est le fameux Notting Hill Bookshop du film Coup de foudre à Notting Hill.
C’est compliqué ici avec Google Maps, et j’ai dû bricoler un moment!
Il faudra absolument passer par la Portobello Road Market et revenir par la station Holland Park est vraiment conseillé!
A partir du métro Notting Hill Gate j’ai dû ajouter 4 destination successives!
Le Google Street View sur Lansdowne Rd m’a aidé à nous rappeler où on avait effectivement passé!
Mon site WordPress principal: https://www.boichat.ch/wordpress/