Intégrer une carte -Google Maps- ou -Google My Maps- dans une section HTML ou une section Texte
Google My Maps est différent de Google Maps, c'est également un outil Google gratuit qui permet de confectionner des cartes détaillées, incluant itinéraires, multiple points, styles différents etc...
Il faut mettre la carte en accès public pour récupérer le code d'intégration HTML, que vous pouvez insérer dans la section HTML (disponible uniquement avec un abonnement Premium Individuel ou Business).
Vous trouverez ci-dessous un petit tutoriel pour vous aider à intégrer une carte interactive sur votre blog, il s'agit d'une carte Google Maps, mais vous pouvez réaliser la même chose avec tout type de carte (IGN...) du moment où le code d'intégration vous est fourni par l'éditeur de la carte :
Sur Google Maps, ou Google My Maps, recherchez votre lieu ou définissez un itinéraire.
Sur Google Maps, ou Google My Maps, recherchez votre lieu ou définissez un itinéraire.
- Exemple d'intégration d'une carte extraite de Google Maps :
Une fois le lieu localisé, cliquez sur le bouton "Menu à
gauche"
Cliquez sur "Partager puis sur Intégrer une carte"
Cliquez sur l'onglet "Intégrer une carte" et copiez le code iFrame comme ci-dessous en utilisant le bouton "Copier le contenu `HTML"
- Exemple d'intégration d'une carte contenant un itinéraire ou un multiple points à partir de Google My Maps :
Pourquoi Toulouse, pourquoi la place du Capitole, et la place occitane ? Allez devinez....
- La 1ère étape consiste à rendre votre carte publique, c'est obligatoire pour pouvoir obtenir le code d'intégration HTML.
Il faut cliquer sur le bouton/lien "Partager"
La carte doit être définie au statut "Public"
Une fois que la carte est définie sur "Public" vous pouvez demander à obtenir le code d"intégration pour l'intégrer à votre blog.
Cliquez sur les trois petits points verticaux à droite de "Carte sans titre"
Choisissez "Intégrer la carte à mon site"
Là, l'outil vous fournit le code d'intégration de la carte pour l'intégrer à un article dans une section HTML ou une section image.
Il vous suffit de le copier, avec un clic droit de votre souris.
Vous avez obtenu le code d'intégration de la carte, ou à partir de "Google Maps" ou de "Google My Maps", dans la section suivante, vous allez apprendre comment utiliser ce code d'intégration pour l'insérer dans un article de votre blog.
En mode rédaction ou édition d'un article, ajoutez une section "HTML" et collez le code iFrame à partir de la ligne 1
ASTUCE !
Vous constatez que le section HTML n'offre pas d'aperçu de la carte, il est également possible d'intégrer votre carte Google Maps dans le code source HTML d'une section Texte qui elle restitue bien un aperçu :
Publiez votre article, vous verrez que sur le blog en mode lecture, la carte sera interactive et zoomable :
Ci dessous un exemple que je viens de
faire sur mon propre blog.
