|
L'API fournit tous les éléments pour mettre en place rapidement une carte fonctionnelle. Elle a été conçue pour faciliter de bout en bout le travail des utilisateurs, en offrant toutes les fonctions nécessaires en JavaScript. En effet, il suffit d'importer le fichier JavaScrip de l'API dans sa page XHTML, et d'ajouter deux appels JavaScript, pour disposer d'une carte immédiatement utilisable en glisser/déposer.
Le fichier JavaScript de l'API, auquel il faut adjoindre sa clef pour l'exploiter, fournit avant tout la classe GMap2(), indispensable car c'est en l'instanciant que l'on crée une carte dans un conteneur HTML de la page - le plus souvent, un div. L'objet instancié dispose ensuite d'un large jeu de méthodes, dont la première et la plus couramment utilisée est setCenter, qui recadre la carte sur de nouvelles coordonnées latitude/longitude. C'est le cas de notre premier exemple, qui pointe approximativement Paris (48.9, 2.3).
 |
|
L'exemple le plus simple de carte que l'on puisse obtenir
|
Partant de cet exemple basique, il est facile de découvrir dans la référence de l'API les fonctions nécessaires pour que la carte se recadre automatiquement sur une adresse donnée, par glissade, et ce en disposant de fonctionnalités de zoom. Le formulaire, tout d'abord, ne comporte qu'un champ texte et un bouton de validation. L'attribut action est vide, et l'on profite de JavaScript pour utiliser l'attribut onsubmit, auquel on fournit simplement une méthode personnalisée, afficherAdresse(), qui prend comme argument le contenu du champ texte de notre formulaire.
La fonction afficherAdresse() n'est pas définie par l'API, mais en exploite les possibilités. La recherche d'adresse utilise le codeur géographique de Google, la classe GClientGeocoder(). Ce codeur prend en charge la conversion d'une adresse physique en coordonnées géographiques, qui comme on l'a vu sont directement prises en compte par l'API avec setCenter().
Pour ce faire, l'instance d'objet geocoder dispose de la méthode getLatLng(), qui prend en premier argument l'adresse entrée par l'utilisateur, et en second argument une fonction anonyme nous permettant d'exploiter les coordonnées. Dans l'exemple, nous utilisons setCenter() comme déjà vu, et nous créons un marqueur de position, généré à partir de l'objet GMarker(), et nous donnant accès à la méthode addOverlay(), qui ajoute l'infobulle "panneau d'affichage" spécifique à Google Maps.
 |
|
En quelques lignes de JavaScript et HTML, il est possible d'obtenir une carte beaucoup plus fonctionnelle
|
Les contrôleurs de zoom, enfin, sont ajoutés lors de la création même de la carte : l'objet map dispose de méthodes addControl(), qui peut prendre en argument l'objet GLargeMapControl() ou GMapTypeControl() (un seul à la fois). Le premier affichera la glissière de zoom ainsi que les flèches de déplacement, tandis que le second donnera le choix entre les types de carte (carte, vue aérienne, hybride). Dans le cas de carte disposant de peu de hauteur, il sera préférable de remplacer GLargeMapControl() par GSmallMapControl() - ou, pour faire encore plus simple, n'utiliser que GSmallZoomControl().
|
