Prenez vos repères avec Google Map API V3

#api#google map#javascript#json

Un peu d’histoire

Initialement lancé aux USA en 2004, Google Map débarque en France le 27 Avril 2006 en version bêta et est considéré stable depuis septembre 2007.

Google Map fait partie de la suite logicielle de Google qui propose des services tels que le Street View, permettant d’observer un panorama à 360° des zones urbaines et rurales, Google Moon et Mars qui sont respectivement des visualisations de la lune et de la planète Mars et enfin, Google Earth qui offre une visualisation de la planète Terre par le biais de vues satellitaires et aériennes.

Nous nous attarderons uniquement sur le service Google Map et plus particulièrement l’implémentation de ce service sur notre site web, grâce à l’API JavaScript V3 fournie par Google dont la première version V3.19 est sortie le 15 février 2015.

Notre projet pratique

En dehors de son API et de ses nombreux services, Google, comme toute multinationale de ce nom, est un généreux mécène qui multiplie les partenariats avec les musées. Je vous propose donc à travers ce projet de créer une Google Map référençant les divers musées parisiens.

Hello Map

Nous nous retrouvons dans notre IDE favori avec une page HTML vierge que nous allons un peu égayer en ajoutant la description du projet :

Alors, je vous ai promis une carte et elle arrive, mais avant cela une petite explication du code nécessaire à son affichage :

  • Une div pour accueillir notre carte qui portera l’id #map-canvas (évidemment vous êtes libre de le changer, mais il faudra répercuter cela tout au long du projet)

  • Le CDN (Content Delivery Network) de Google Map API V3 qui nous permet d’utiliser en une ligne l’API

  • Et évidemment un petit bout de JavaScript que nous détaillerons par la suite
  • Nous ajouterons un soupçon de CSS tout de même pour la forme

L’API nous propose d’ajouter des options, nous utiliserons les options « center » et « zoom » qui nous permettent respectivement de choisir le centre de la carte à l’initialisation et le zoom souhaité sur ce point.

Nous voilà donc avec une carte certes très jolie, mais où sont donc nos musées ? On va essayer d’éviter le placement et le référencement à la main…

Pour cela nous utiliserons la source libre opendata.paris.fr qui nous propose de nombreux sets de données de tous genres pour la ville de Paris.

Vous pouvez télécharger le set utilisé dans cet exemple à cette URL :

http://opendata.paris.fr/explore/dataset/liste-musees-de-france-a-paris/?tab=export

Du JSON (JavaScript Object Notation) au marqueur

Voilà, nous avons notre fichier Json que nous intégrons à notre projet sous le nom de ‘markers.json’.
Et nous allons ajouter la librairie jQuery afin de parcourir simplement notre JSON.

Nous y voilà, pour déclarer un marqueur et donc repérer nos musées, nous n’avons besoin que d’une paire de coordonnées et d’une carte sur lesquels les afficher.

Il nous suffit donc de parcourir le fichier Json par l’intermédiaire de la fonction jQuery « $.getJSON ». Nous vérifions la présence de coordonnées au cas où le fichier Json serait erroné (notre fichier en l’occurrence pour le musée n°39 lors de l’écriture de cet article).

Nous y sommes, notre carte des musées parisiens est prête, voyons le résultat.

Dans cet exemple nous utiliserons les valeurs suivantes.
zoom = 13;
center = 48.859952 , 2.335068  (Paris)
image = ‘museum_32.png’  (image ajoutée au projet)

Carte de musées parisiens au 5 juin 2015
Carte de musées parisiens au 5 juin 2015

Conclusion et approfondissement

Google nous offre, par le biais de son API Google Map, la possibilité de mettre en place simplement et rapidement une carte personnalisable tant esthétiquement que fonctionnellement. Pour tous types de données de services et d’utilisations, il nous sera possible de créer une carte sur mesure.

De même, le Json se marie très bien avec cet outil et apporte performance et compatibilité à vos applications. A noter qu’il existe un dérivé du Json, le GeoJson, spécification du Json orientée pour les données géographiques.

Pour aller plus loin, il est même possible de stocker en base de données les coordonnées, de générer le Json lors d’un appel Ajax et garder ce principe pour l’affichage de fenêtres contenant les informations du marqueur.

Il est envisageable de stocker dans une autre table les informations liées à chaque marqueur afin de les afficher lors d’un clic sur le marqueur donné. Pour cela, Google met à disposition les Info-Window (pour plus d’informations la documentation de Google se trouve à l’adresse suivante : https://developers.google.com/maps/documentation/javascript/markers ).

En résumé, les possibilités sont quasiment illimitées, contrairement à cet article qui touche à sa fin. Bon dev à tous avec Google Map API V3 !

Il est possible de retrouver l’intégralité de cet article dans le numéro 191 du mois de Décembre 2015 du magazine « Programmez ».