J’ai récemment dû créer une carte Google Map personnalisée pour un client, et j’ai été surpris de la facilité avec laquelle cette tâche a été accomplie. J’ai décidé qu’il pourrait être utile à d’autres personnes et qu’il pourrait être conservé comme guide de référence.
Mon client fabrique sa propre marque de bière, et les bières sont stockées dans différents bars de la ville de New York. Il voulait une carte simple indiquant les différents endroits où l’on peut acheter la bière. Heureusement, Google Maps vous permet de créer des cartes personnalisées, avec des épingles de localisation, dans le but que vous souhaitez.
Pour les besoins de ce guide, j’ai changé le nom de la bière et créé ma propre bière fictive appelée GoldenBeer. C’est une bière délicieuse, et il est tout à fait impossible d’avoir la gueule de bois avec.
Ce guide est divisé en plusieurs étapes :
- Création d’une carte Google
- Ajout manuel de lieux
- Importation de plusieurs lieux à la fois
- Mise en place de votre carte
- Utilisation de différentes couches
- Modification du fond de carte
- Intégrer votre carte sur votre site web
1) Créer une carte Google
La première étape consiste à aller sur Mes cartes dans Google Maps – https://www.google.com/maps/about/mymaps/ ou https://www.google.com/maps/d/ et à cliquer sur “Démarrer” (voir la capture d’écran ci-dessous).
Cliquez sur le bouton “Créer une nouvelle carte”. Vous obtiendrez une carte portant le nom de “Carte sans titre” et vous créerez une couche appelée“Couche sans titre“.
Comme vous l’avez peut-être deviné, vous pouvez utiliser des couches pour organiser vos informations. Dans mon cas, par exemple, j’aurai une couche pour les bars qui vendent de la GoldenBeer, et une couche pour les magasins de spiritueux (ou “off-licenses” en anglais britannique) qui vendent de la GoldenBeer.
Les couches sont pratiques car les utilisateurs peuvent les sélectionner et les désélectionner, ce qui leur permet de trouver plus facilement les emplacements. Vous pouvez également donner un style à tous les emplacements d’une couche en même temps, ce qui donne un indice visuel aux différents emplacements.
Vous n’êtes pas obligé de le faire tout de suite, mais vous pouvez renommer votre carte en cliquant sur le nom actuel (Carte sans titre). Ce nom apparaît lorsque les gens consultent votre carte. Vous pouvez donc la renommer en lui donnant un nom comme“Emplacements des bars GoldenBeer“.
Ajout manuel de lieux
À partir de là, vous pouvez rechercher manuellement un lieu (par exemple, un point de repère ou une entreprise). Dans mon cas, je cherche“Meghan’s bar and Kitchen“, un bar situé sur la 45e rue ouest, à New York, et l’un des meilleurs endroits où se réfugier pour déguster une bière GoldenBeer lors d’un après-midi new-yorkais chargé. Saisissez le lieu dans la barre de recherche et cliquez sur le bouton de recherche.
Lorsque votre emplacement est trouvé sur la carte, une boîte s’affiche avec l’emplacement et ses détails. Il suffit de cliquer sur le texte “+ Ajouter à la carte” au bas de cette boîte (surligné en jaune dans la capture d’écran ci-dessous). Répétez ce processus pour autant d’emplacements que vous le souhaitez.
Importation de plusieurs lieux à la fois
Et si vous avez beaucoup de sites et que vous ne voulez pas les ajouter manuellement, un par un ? GoldenBeer est disponible dans des centaines de bars et de magasins de spiritueux, et je n’ai pas voulu les saisir manuellement ; cela aurait pris des heures ! Google Maps vous permet d’importer facilement un certain nombre de types de données provenant de diverses sources. Par exemple, vous pouvez télécharger un fichier Excel CSV depuis votre ordinateur, ou importer un fichier GPX (GPS Exchange Format) depuis Google Drive.
Dans cet exemple, je vais utiliser un fichier Excel appelé “test-data.xlsx” contenant une liste des bars de New York qui vendent de la bière GoldenBeer. Le fichier Excel contient une colonne, appelée“Locations“, qui contient simplement une liste des noms et adresses des bars dans le même champ (voir la capture d’écran ci-dessous).
Pour télécharger le fichier, cliquez sur“Importer” dans la modale située à gauche de l’écran (en jaune dans la capture d’écran ci-dessous). Cela importera vos emplacements dans le calque actuellement sélectionné, dans ce cas “Calque sans titre” car je n’ai pas encore pris le temps de le renommer.
Il vous sera ensuite demandé de choisir la colonne de votre fichier Excel qui sera utilisée par Google Maps pour trouver vos emplacements. Dans mon cas, il n’y a qu’une seule colonne, je coche donc “Emplacements”, puis je clique sur“Continuer“.
Il vous sera ensuite demandé de choisir une colonne à utiliser comme titre pour vos lieux. Ma colonne d’emplacement ne contient que le nom du bar, il s’agit donc également du titre de l’emplacement.
*Note importante*
Comme les bars sont déjà dans Google maps en tant que commerces, Google maps utilisera le nom correct. Toutefois, si vous créez une carte contenant des lieux qui ne sont pas déjà des entreprises ou d’autres “lieux” dans Google Maps, vous devez prévoir plusieurs colonnes, telles qu’une colonne “”.Adresse du baret la colonneNom du bar‘, alors bien sûr, vous utiliserez la colonne ‘Nom du barVotre carte personnalisée portera le nom de cet emplacement.
Cochez la colonne que vous souhaitez utiliser comme titre, puis cliquez sur“Terminer“.
Vous verrez maintenant une série d’épingles sur votre carte, basées sur les emplacements de votre fichier Excel (voir la capture d’écran ci-dessous). Remarquez que la modale de gauche indique le nom du fichier que j’ai téléchargé (test-data.xlsx) et, en dessous, le nombre d’éléments ajoutés – Tous les éléments (12).
Styliser votre carte
Désormais, si vous souhaitez utiliser autre chose que l’épingle bleue par défaut qui marque chacun de vos emplacements, vous pouvez facilement la personnaliser. Si je passe la souris sur le texte “Tous les articles (12)”, une icône en forme de seau à peinture apparaît (voir la capture d’écran ci-dessous).
Le texte au-dessus de mes emplacements dans la modale de gauche, qui indique“Style uniforme“, fait référence à la façon dont toutes mes épingles d’emplacement sont stylisées. Cela signifie que je peux mettre à jour le style de toutes les épingles en même temps. Vous pouvez cliquer sur la flèche située à côté de ce texte pour modifier les paramètres du style.
Lorsque le style est réglé sur “Style uniforme”, un clic sur le godet de peinture fait apparaître une palette de couleurs. De là, je peux styliser tous les articles en même temps. Je peux modifier la couleur de l’épingle de localisation, utiliser une icône fournie par Google Maps ou même télécharger une icône personnalisée via le bouton “Autres icônes” (voir la capture d’écran ci-dessous).
Comme indiqué plus haut, si je dois donner un style individuel aux icônes, je peux le faire aussi en cliquant sur la flèche située à côté du texte“Style uniforme“, ce qui fait apparaître tous les emplacements individuels (voir la capture d’écran ci-dessous).
Si je clique sur l’un des lieux, il apparaît sur la carte et, dans la fenêtre pop-up, je peux cliquer sur l’icône du godet de peinture pour donner un style à ce lieu individuellement (voir la capture d’écran ci-dessous).
Utilisation de différentes couches
Maintenant, que se passe-t-il si vous avez différents types de données, ou différents types d’endroits où votre produit est vendu ? Comme je l’ai mentionné précédemment, dans mon cas, je dois faire la différence entre les bars et les magasins d’alcool (hors licence) afin que les utilisateurs puissent facilement faire la différence et trouver plus rapidement ce qu’ils recherchent.
Pour ce faire, j’ai décidé de faire en sorte que tous les pins de localisation des bars soient d’une seule couleur (bleu) et que tous les pins de localisation des magasins d’alcool soient d’une autre couleur (rouge).
J’ai téléchargé les bars sur une couche, et j’ai créé une nouvelle couche pour les magasins d’alcool en cliquant sur“Ajouter une couche”. J’ai ensuite importé un fichier Excel des magasins d’alcool dans cette deuxième couche, et j’ai renommé la couche “Magasins d’alcool”.
Cela a eu un effet à deux facteurs. Cela m’a permis de styliser tous les emplacements de chaque couche en une seule fois, au lieu de le faire un par un. En outre, elle a amélioré l’expérience de l’utilisateur, car les couches peuvent être activées et désactivées. Les utilisateurs peuvent désactiver les magasins d’alcool, par exemple, s’ils ne veulent voir que les bars sur la carte (voir la capture d’écran ci-dessous).
Modification du fond de carte
Il peut arriver que vous souhaitiez modifier les couleurs ou la quantité de contenu visible sur votre carte (ou “fond de carte”). La carte par défaut contient par exemple beaucoup de points de repère, ce qui peut rendre plus difficile la visualisation de vos emplacements par les utilisateurs.
Une solution consiste à modifier la“carte de base“. Ce paramètre se trouve au bas de la modale de gauche, et il existe actuellement 9 options parmi lesquelles choisir. Il suffit de cliquer sur “fond de carte” et de choisir l’une des options pour voir à quoi ressemble votre carte avec le nouveau fond (voir la capture d’écran ci-dessous).
Intégrer votre carte sur votre site web
Vous avez maintenant créé votre carte. Comment pouvez-vous le montrer aux gens ? Ou même l’utiliser vous-même à une date ultérieure ?
Il suffit de se rendre dans le tableau de bord de vos cartes(https://www.google.com/maps/d/), de localiser la carte que vous avez créée et de cliquer sur l’icône de partage (voir la capture d’écran ci-dessous). À partir de là, choisissez la dernière option“Intégrer sur mon site“.
Une fenêtre popup apparaîtra contenant le HTML que vous devez intégrer à votre site (il s’agit d’une iFrame). Copiez le contenu et collez-le sur votre site web.
- Si vous utilisez l’éditeur de blocs de WordPress, utilisez le bloc“Code” pour ce contenu.
- Si vous utilisez le bon vieil éditeur WYSIWYG de WordPress, utilisez l’onglet“Texte” (à côté de l’onglet “Visuel” où vous saisissez le contenu).
- Si vous utilisez le constructeur de pages Elementor, utilisez l’élément“HTML” .
- D’autres constructeurs de pages disposent également d’un bloc/élément qui vous permet d’insérer du HTML.
Donc, vous l’avez. C’est ainsi que vous pouvez créer une carte avec plusieurs marqueurs. Dans ce cas, nous l’avons utilisée pour indiquer les lieux de vente d’un produit, mais il s’agit là d’une des nombreuses utilisations possibles d’une carte personnalisée. À quoi servira votre carte Google personnalisée ?
