Création d’une Map personnalisée pour son site internet

Nous allons aujourd’hui nous intéresser à la création d’une map Google personnalisée pour son site internet. Bien sur pour cela, nous allons évidemment utiliser les outils mis à disposition par google et essentiellement l’API 3.0 de GoogleMaps. Une fois que l’on aura personnalisé la carte selon nos besoins, nous l’intégrerons proprement à notre site web. La carte que je vais utiliser est centrée sur la région de chambéry mais ne vous inquietez pas, nous allons aussi voir comment ajouter une position particulière.

creation-carte-personnalisée

Ne soyez pas comme Charlie . Affichez votre position !

Commençons tout d’abord par nous interesser à l’outil de personnalisation de Google disponible à l’adresse suivante : Google Map Tool

A votre arrivée, vous allez vous apercevoir que vous êtes sur une version de googleMaps quelque peu modifiée. En effet, plusieurs cadres apparaissent et vous permettront par la suite de personnaliser la plupart des éléments habituels d’une carte tels que les routes, les noms, ….

Pour débuter nous allons commencer par entrer l’adresse sur laquelle on veut centrer la carte. Pour ma part j’ai choisi celle de DigitalSky.fr. Il est aussi tout a fait possible de rajouter des coordonnées GPS ( latitude et longitude ).

creation-carte-personnalisée-1

A partir de maintenant, attaquons la personnalisation selon vos besoins. Premièrement, le cadre de droite, c’est celui qui va afficher tous vos calques ( les couches modifées si vous préférez ). Pour le moment, vous ne devez voir apparaitre qu’un seul « Map Style » et c’est normal car c’est celui de départ, mais en cliquant sur le bouton [Add] il vous sera possible d’ajouter autant de style que vous le souhaiterez. Deuxiemement, le cadre de gauche qui recense l’ensemble des modifications possibles.

Celui ci est séparé en 3 parties distinctes, la premiere vous permet de choisir les entités de la map que vous souhaitez modifier comme les routes, les commerces, les ecoles, l’eau, etc…. Le deuxieme vous permet de choisir les éléments de l’entité qui vont etre modifiés comme les formes géometriques ou encore les noms d’entités.

Enfin le troisième encart, essentiellement le plus important dans une partie personnalisation, est le « stylers » qui vous permettra d’ajouter des couleurs, des gammas, des grosseurs ou de changer des parametres de visibilités sur la map.

Créons donc un premier calque ou l’on va modifié la couleur des routes, pour cela dans la partie « Feature type », choisissez « Road », ce qui permettra de choisir tout les types de routes tels que les autoroutes, les chemins et route nationales entre autres. Un fois que vous avez choisi cela, dans la partie « Element type », choisissez  » All>Geometry>Stroke  » ce qui aura pour effet de modifier uniquement le contour des routes et non l’interieur ou les noms.

Ensuite, dans la partie « Stylers » , cliquer sur color et choisissez la couleur que vous souhaitez , pour ma part j’ai choisi le bleu #479bb7 de Digitalsky.fr. Vous devriez voir a présent que vos routes sont bordurés par des traits de la couleur choisie.

Ne nous arretons pas en si bon chemin et changeons aussi, la couleur de l’interieur des routes, pour cela allez sur le cadre de gauche et cliquer sur [Add] pour ajouter un nouveau calque. Puis ensuite, choisissez  l’entité « routes » et cette fois ci, choisissez « All>Geometry>Fill » pour remplir les routes par la couleur de votre choix et enfin dans le « stylers » choisissez la couleur que vous souhaitez, pour l’exemple j’ai choisi #e6ecff.

Voici a priori un exemple de ce que vous devriez obtenir a ce moment.

creation-carte-personnalisée-2

 

 



20Mar
2015

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *