Google Maps Javascript API (Partie 1)
|
Cet article montre comment utiliser les fonctionnalités de cette excellente API javascript signée Google.
|
|
Vu
9796
fois
|
Introduction.
Cet article montre comment utiliser les fonctionnalités de cette excellente API javascript signée Google.
Elle vous permet d’intégrer à vos pages web le service Google Maps, si vous ne connaissez pas, je vous conseille de jeter un coup d’œil ici : http://maps.google.com/.
Demande de clé de certificat.
Maintenant que vous connaissez les possibilités qui vous sont offertes, il faut vous enregistrer sur leur site afin d’obtenir une clé (API Key) pour l’utilisation du service.
Vous pouvez le faire ici : http://www.google.com/apis/maps/signup.html.
Cette clé est gratuite si vous ne faîtes pas un usage commercial du site sur lequel la ou les cartes apparaîtront. Elle est valable pour une URL donnée (sous la forme : http://url_de_mon_site, ainsi que pour tous ses sous répertoires. Si vous avez plusieurs sites, il faudra générer plusieurs clés.
Elle se présente sous cette forme :
ABQIAAAA2E6BR7ciY34a7MmcIQUEQxQuYvpEwV8MjvemZKVBr5sXJ82bPRRR
_PBQ1dD0r96toT3mvea846ycKA
Mise en œuvre.
Tout d’abord vous pouvez trouver en ligne la documentation de référence originale (en anglais) de l’API : http://www.google.com/apis/maps/documentation/reference.html.
La première chose à faire est de référencer l’API dans notre page web. Pour cela nous allons écrire ceci entre les balises <head> et </head> de notre page :
<script src="ttp://maps.google.com/maps?file=api&v=2&key=ABQIAAAA2E6BR7ciY34a7MmcIQUEQxQuYvpEwV8MjvemZKVBr5sXJ82bPRRR_PBQ1dD0r96toT3mvea846ycKA" type="text/javascript"></script>
|
On référence donc le serveur qui va nous rendre service chez Google : http://maps.google.com/maps.
On passe en paramètre :
- ?file=api pour signifier quel service on souhaite utiliser
- &v=2 pour indiquer la version (ici la 2)
- &key=LA_CLE pour s’authentifier
Evidement, comme je vous l’ai expliqué plus haut ce code ne fonctionnera qu’une fois exécuté sur le serveur mentionné lors de l’enregistrement.
Une fois la balise script ajoutée, nous en ajoutons une autre pour déclarer une fonction qui se charge d’initialiser la carte, ici avec une carte centrée sur Paris.
< script type="text/javascript">
function load()
{
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map"));
// Centrons la carte sur Paris
map.setCenter( new GLatLng(48.85861640881589, 2.3459243774414062), 8);
}
}
</ script>Nous déclarons en fait une nouvelle instance de la classe GMap2 que nous appellerons map, en lui passant en paramètre un élément <div> de notre page. Nous appelons la fonction load() de notre page dans l’évènement onload de la balise <body> et la méthode GUnload() qui elle, est située dans l’API, dans l’évènement onunload.
Nous appelons ensuite la méthode de notre instance map.setCenter(). Elle prend deux paramètres :
- un objet GLatLng qui est en fait un point d’intersection entre une latitude et une longitude qui sont les deux paramètres.
- Une profondeur de zoom. (le zoom allant de 1 à 20).
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 700px; height: 500px"></div>
</body>
|
Ce qui nous donne comme résultat :
Les Contrôles.
La méthode addControl (control, position?)
Le second paramètre, la position est facultatif. S’il n’est pas renseigné, la position par défaut sera appliquée.
Elle prend en paramètre un GControl, certains sont directement "implémentables".
GSmallZoomControl.
map.addControl(new GSmallZoomControl ());
Il permet de zoomer/dé zoomer d’une profondeur de zoom. Sa position par défaut est en haut à gauche de la carte.
Le GSmallMapControl.
map.addControl(new GSmallMapControl());
Ce contrôle est une version “light” permettant juste de déplacer la carte dans quatre directions. Il possède en dessous un GSmallZoomControl.
GLargeMapControl.
map.addControl(new GLargeMapControl());
Ce contrôle est le plus complet pour se diriger et zoomer, il a donc les quatre flèches pour se déplacer et un bouton au milieu de ces flèches permettant de recentrer la carte immédiatement sur le point avec lequel vous l’aviez initialisée.
Vous avez aussi une échelle de zoom, en déplaçant le curseur la carte sera automatiquement rafraîchie. Le zoom s’effectue toujours en fonction du point central sur la carte au moment du zoom.
Le GMapTypeControl.
map.addControl(new GMapTypeControl());
Ce contrôle permet de choisir le type de carte, il existe trois types :
C’est celui qui est affiché par défaut (comme dans notre premier exemple), vous avez tous les noms de régions, ville, villages, les routes, autoroutes …
Ce mode offre une vue satellite de très bonne qualité.
Et enfin le mode mixte qui comme son nom l’indique mélange les informations détaillées du mode Plan/Carte avec la qualité des photos satellites.
Il existe des constantes mises à disposition par l’API,
- G_NORMAL_MAP pour le mode Plan/Carte
- G_SATELLITE_MAP pour le mode Satellite
- G_HYBRID_MAP pour le mode Mixte
- G_DEFAULT_MAP_TYPES qui est un tableau contenant les trois constantes citées précédemment
La position par défaut du GMapTypeControl est en haut à droite de la carte.
GScaleControl.
map.addControl(new GScaleControl());
C’est l’échelle de la carte, sa position par défaut est en bas à gauche à côté du logo Google.
Gérer les interactions de l’utilisateur.
Pour s’abonner à un évènement, il faut utiliser la méthode GEvent.addListener
Il faut lui passer en paramètre, la map, le nom de l’évènement auquel on souhaite s’abonner, et une méthode à appeler lorsque l’évènement se déclenche.
var map = new GMap2(document.getElementById("map"));
GEvent.addListener( map,
"moveend",
function()
{
alert("moveend");
}); |
La liste des évènements est disponible dans la documentation de référence dont le lien se situe au début de l'article. En voici une liste non exhaustive:
- Les évements de clicks de la souris (click, dragstart, drag, dragend)
- Les évements de mouvements de la souris (movestart, move, moveend, mouseover, mouseout, mousemove)
- Les évements de gestion des signets (addoverlay, removeoverlay, clearoverlays)
- Les évements de gestion des fenêtres d’informations (infowindowopen, infowindowclose)
- L’évenement de zoom (zoomend)
- L’évenement de chargement (load)
Tous ces évènements sont passés à la méthode GEvent.addListener en paramètre sous forme de chaîne de caractères comme dans l’exemple.
Consultez la liste pour les autres évènements.
Voici la carte avec le maximum de contrôles par défaut :
Et le code de la méthode load().
function load()
{
if (GBrowserIsCompatible())
{
// Instancions la nouvelle carte
var map = new GMap2(document.getElementById("map"));
// Centrons la carte sur Paris
map.setCenter(new GLatLng(48.85861640881589, 2.3459243774414062), 8);
//Ajoutons nos contrôles
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GLargeMapControl());
}
} |
Dans la deuxième partie de l'article, nous verrons :
Ouvrir une fenêtre d’information.
Manipulation des marqueurs.
Manipulation des icons.
Customiser vos contrôles sur la carte. Pot pourri de fonctions et classes de l'API.
 |
|
Publié le
24/10/2006
|
|
Auteur:
SYL#
|
|
|