Personnaliser une carte Google Maps

Google met à disposition du public une application permettant de personnaliser graphiquement les Google Maps. Simple d’utilisation, elle permet à tous de générer un code que le développeur utilisera ensuite pour afficher une map personnalisée.




Prise en main de l'interface de personnalisation


Pour commencer, ouvrez l'éditeur de Google Maps personnalisées.

L’interface est simple : en fond, la carte qui s’actualise automatiquement au fur et à mesure des modifications apportées.
À gauche, le menu avec les éléments à modifier, les paramètres et les styles.
À droite, la liste des modifications apportées.
En haut à droite, le champ de recherche gmap qui permet de centrer la carte où on le souhaite.

interface de l'application
Exemple

Pour comprendre comment marche l’outil, commençons par un exemple très simple : nous allons changer la couleur de l’eau.
  • Centrez la carte où vous le souhaitez. Dans cet exemple nous allons faire une carte de la ville de Lyon.
  • Sélectionnez l’élément Water
  • Cochez le style Color, et changez les taux de R, V et B jusqu’à obtenir la couleur voulue.
  • Pour valider cette modification, il faut en ajouter une nouvelle en cliquant sur le bouton Add.

Gmap : changer la couleur de l'eau

Les éléments personnalisables dans la Google Maps


En prenant un à un les éléments personnalisables de l'application, nous allons voir comment réaliser cette map en 10 minutes seulement :

Gmap à reproduire



1. Les éléments administrative


› Country : les frontières et les noms des pays
› Province : les frontières et nom des états aux USA et au Canada
› Locality : les noms des villes et villages
› Neighborhood : les noms des quartiers
› Land parcel

Voici les modifications que nous allons apporter pour notre exemple :
  • Changer la couleur des noms de villes, villages, et dans notre exemple des quartiers, en sélectionnant l’élément Administrative, puis le paramètre Label > Text > Stroke. On peut par exemple changer la couleur du contour des texte et son épaisseur.

Gmap : changer les contours des textes
  • S’il y a un peu trop d’information, on peut par exemple enlever les noms des arrondissements, en choisissant le type Administrative > Locality et en appliquant le style Visibility : Off.
Gmap : cacher les arrondissements

N’oubliez pas d’ajouter une nouvelle modification pour valider celle que vous venez de faire, à l'aide du bouton Add.

2. Les éléments Landscape


› Man made : les surfaces occupées par des villes et villages
› Natural : le reste

Voici les modifications que nous allons apporter pour notre exemple :
  • Pour avoir la même couleur à tout le fond de carte, il faut donner une couleur à l’élément Landscape

Gmap : donner une couleur au fond

3. Les éléments Points of Interest


Ce sont les éléments “spéciaux” comme les parcs naturels, les écoles, les hopitaux, les bâtiments publics. Ils ne sont pas utiles pour notre exemple, nous allons les cachez. Appliquez le style Visibility:Off à l'élément Point of Interest.
Gmap : cacher les point of interest

4. Les éléments Road


› Highway : les autoroutes et certaines départementales.
On peut avoir accès uniquement aux autoroutes avec l’élément Road > Highway > Controlled access.
› Arterial : les autres départementales et toutes les routes standard.
› Local : les rues.

Voici les modifications que nous allons apporter pour notre exemple :
  • Cacher les icônes de type A36, en choisissant l’élément Road, et en appliquant le style Visibility: Off au paramètre Labels > Icon

Gmap : cacher icones de routes
  • Changer la couleur de l’intérieur des tracé de routes, en choisissant l’élément Road, et en appliquant le style Color au paramètre Geometry > Fill
    Ici nous lui donnons la même couleur que le fond de carte.

Gmap : changer la couleur des routes
  • Changez la couleur des contours de routes, en choisissant l’élément Road, et en appliquant le style Color au paramètre Geometry > Stroke

Gmap : changer les contours des routes
  • Changez les couleurs des noms de rues, en choisissant l’élément Road, et en appliquant le style Color au paramètre Label > Text > Fill

Gmap : changer l'aspect des noms de rues
  • Et pour que ce soit lisible, on change les contours avec le paramètre Label > Text > Stroke, en changeant la couleur (style Color) et l’épaisseur (style Weight).

Gmap : changer l'aspect des noms de rues

5. Les éléments TRANSIT


› Line : les lignes de trains et voies de bateaux
› Stations : les stations de métro, les gares, les aéroports

Dans notre exemple, nous allons les cacher pour simplifier la carte.
Gmap : cacher les éléments transit

6. L'élément WATER


Ce sont les océans, mers, rivières, lacs, même minuscules ruisseaux et points d’eau. Pas moyen de les différencier, et c’est dommage : il aurait été intéressant d’avoir un fond de carte d’une couleur unie, sans voir les fleuves et les points d'eau.


Revenir sur une modification


Pour cela, nous allons la chercher dans la liste de droite, cliquer dessus et changer les style. Par exemple ici, nous allons éclaircir les textes de quartier.
Gmap : revenir sur une modification



Astuces de personnalisation Gmap


Les régions françaises ne sont pas comprises dans l'élément Administrative > Province. En fait, elles ne rentrent dans aucune des sous-catégories de Administrative. Pour les cacher, il faut ruser.
Voici comment procéder :
  • Mettre en "Visibility: off" l’élément Administrative : on voit que les régions, mais aussi les frontières, les noms des villes disparaissent.

Regions apparentes
cacher tout Administrative

  • Dans une nouvelle modification, mettre en "Visibility:on" les éléments que l’on veut réafficher, par exemple Administrative > Country

regions cachees

Maintenant que vous avez fini, profitez-en pour faire des jolis marqueurs personnalisés !

Carte avec Marqueur design


Dans le chapitre suivant, nous vous expliquerons comment récupérer le style de notre Gmap personnalisée, et comment mettre en place cette map sur vos pages web.






Rechercher sur la Ferme du web