Le monde du Web

Intégrer des cartes interactives avec Google My Maps

Voici un tutorial simple pour ajouter à votre site une carte interactive, sur laquelle vous allez pouvoir insérer des points, des trajets, et des descriptions composées de photos ou de liens hypertexte.

Créer une carte Google My Maps

Gérer les calques

Les calques servent à trier les points d’une carte et à les personnaliser. Vous pourrez ainsi afficher ou cacher à volonté certains groupes de points sur votre carte. Cliquez sur les trois points à droite de votre calque pour en modifier le nom, ou pour le supprimer.

Entrer un point sur la carte

Entrer une adresse ou des coordonnées GPS dans la barre sur le haut de la carte

Un point apparaît sur la carte, il doit correspondre à ce que vous avez saisi.
Si ce n’est pas le cas, vous pouvez le déplacer à la main.

Il peut y avoir plusieurs suggestions pour une adresse que vous avez saisi

Les points verts sur la gauche ne sont pas encore ajoutés à votre carte Pour les ajouter, appuyez sur le «+» correspondant

Le point va alors changer de couleur et s’ajouter automatiquement au calque en cours.

En cliquant sur ce point, vous ouvrirez un menu détaillé.
Les options de modification se trouvent en bas à droite.

Personnaliser la description des points

Ajouter des liens dans la description d’un point

Cliquez sur  l’icône

Pour ajouter des liens dans la description, il vous suffit de les copier-coller, cependant ils seront probablement trop longs pour être agréables à lire.

Rendez-vous sur le réducteur de liens de Google : https://goo.gl/

Entrez l’URL du lien que vous souhaitiez ajouter dans la description et cliquez sur «Shorten URL». Copiez la nouvelle URL, puis collez-la dans la description de votre point.

Ajouter des images dans la description

Cliquez sur l’icône
Vous pouvez glisser-déposer des photos. La première servira d’aperçu au point. Les photos seront stockées sur votre espace Google Drive, vous pourrez donc construire votre album complet au préalable et ensuite vous soucier de paramétrer vos points. Les dimensions conseillées sont 495×370 pixels, pensez donc à redimensionner vos images si elles ont été prises avec un appareil photo récent.

Résultat final, après personnalisation des points : Une carte complète des services de randonnée !

Inclure la carte sur votre site

Pour inclure la carte sur votre site, il vous faudra utiliser une IFrame, qui ressemble à ceci (copiez-collez ce code dans votre page, avec l’éditeur en mode « Texte », pas « Visuel ») :

<iframe src="https://www.google.com/maps/d/embed?mid=1L4dxKF3Ly60ZUEIzNAFnwCyyTic" width="900" height="400">

Vous devrez évidemment remplacer la partie src="" pour qu’elle corresponde à votre carte et pas à la carte exemple de ce tuto. Pour obtenir ce code, vous pouvez utiliser directement la fonction « Partager »  incluse en haut à droite de la carte, représentée par le symbole

Commentaires

Christophe PERRIN 28 septembre 2017

Merci pour ce tuto. Comment faire pour conserver le menu qui permet de selectionner les calques dans une intégration de page internet svp ?

webosity 28 septembre 2017

Bonjour Christophe,

par défaut, la barre latérale est cachée, mais elle est tout de même présente sur la carte. Il faut simplement appuyer sur l’icône en haut à gauche de la carte pour dévoiler les calques.

frazap 26 octobre 2017

Les URL même « short » n’étant pas très conviviales, est il possible de mettre un lien hyper texte dans la modification d’une description ?

webosity 30 octobre 2017

Bonjour frazap,

étant donné que la description n’accepte pas de code HTML, je ne pense pas que cela soit possible. C’est la raison pour laquelle j’ai utilisé un URL shortener.

Gianni 13 novembre 2017

Bonjour,

Merci pour votre article, grâce auquel j’ai pu intégrer une carte Google My Maps sur un site. J’aimerai aller plus loin dans la personnalisation de ma page et j’aimerai savoir si il est possible de masquer la barre supérieure de la carte qui contient le titre et les boutons ? Si quelqu’un connait une solution cela m’intéresse beaucoup. Au plaisir. Gianni

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.