Pour commencer l’année, je vous propose un petit bout de code qui vous permettra de styliser une carte de Google Map. L’entreprise, qui n’est pas qu’un moteur de recherche, est assez fortiche dans son API de carte interactive et dont les ressources sont disponibles pour les développeurs (ici)
Evitez l’iframe classique
Si je présente cet outil, c’est parce qu’il est vrai qu’il est fort décevant de voir une carte Google Map dans la page contact d’un site aux couleurs qui lui sont propres et qui ne corroborent pas du tout avec le style du design de Google. Il est en effet très facile d’insérer une iframe de la carte google dans votre code html pour l’afficher simplement, mais avec tout ce que cela implique : pas de personnalisations, de mauvais points dans votre SEO.
Snazzy pour sa forme
Il est en fait possible de styliser la carte à l’aide d’outils en ligne qui vous fournit un code de style, que vous pouvez ensuite coller dans la construction de votre carte. (ligne 19 dans mon exemple) – moi, je démarre de Snazzy (voir ici). Mieux, mettre les doigts dans le code de Google vous permet d’ajouter des marqueurs (des adresses lignes 25 à 66) et de personnaliser le contenu des infos qui s’y associent (infobox – Ligne 76 – où je détaille « mes clients » 🙂 que j’aurai pu mettre dans un fichier json)
Plusieurs marqueurs …
Ce qu’il faut bien comprendre , c’est que l’API différencie la carte (avec en option son centrage, son zoom, éventuellement ses outils par défaut) et ses marqueurs, auxquels on paramètre la carte où ils doivent s’afficher (ligne 70). On peut aussi choisir le style du marqueur en mentionnant l’url de l’image choisie (ligne 6).
Le service payant de Google
Voilà en gros le code (en javascript) que j’utiliserai/améliorerai pour l’affichage d’une carte Google et détaillant plusieurs marqueurs. A noter que Google vous fournit maintenant une clé aux restrictions payantes, sous bases de quotas : plus vous avez de monde sur votre carte, plus votre quota descend pour enfin passer aux paiements des services de Google. Une bonne raison de passer aux alternatives. Il en existe. Je n’en ai que deux à vous proposer mais je ne les ai pas testés :
https://leafletjs.com/examples.html
https://community.algolia.com/places/
Et mon code pour styliser une Google Map :
https://codepen.io/lintermediaire/pen/BMZzwO/
