GeoWeb, Information géographique, Mashups, APIs cartographiques, Géolocalisation, Webmapping

Tutorial API Google Maps (1ère partie)

Renaud

18 octobre 2006
par Renaud · 15 Commentaires
Catégorie(s) : API Google Maps, Mashups, Tutoriel

L’API Google Maps a révolutionné le Web (du moins en partie). Cette application cartographique en javascript totalement gratuite a permis aux développeurs de créer les « mashups », des applications hybrides qui combinent plusieurs sources d’informations.

Si vous êtes tenté par le développement d’une application utilisant de la cartographie, voici un tutorial présentant les grandes lignes de l’API Google Maps.

Tout d’abord je ne saurais vous conseiller d’acheter « Beginning Google Maps Applications » (en anglais).

Ce tutorial se fera en plusieurs parties que je posterais au fur et à mesure. De plus je pense que je ferais d’autres tutorials pour les autres API car elles ont chacune leurs avantages et inconvénients.

Prérequis

Pour utiliser l’API Google Maps (ou tout autre API cartographique) vous devez avoir des connaissances en language Javascript et éventuellement développement orienté objet.

L’API Javascript Google Maps est (pour faire simple) un script Javascript qui est appelé grâce à la balise <script>.

L’appel au code javascript doit être fait avec un paramètre « key ».

Cette clé vous est fournie par Google et dépend du nom de domaine où sera appelée l’API Google Maps.

Par exemple pour le nom de domaine renalid.com, la clé est :

ABQIAAAAGrKrVTYvOAArcvEc7RkikRQOhA6XYTkMKiLr-GFNzA5v8MYfFhTIin2y-FSBu_nLsl58KPu9ySKs4A

Pour obtenir cette clé, accéder à cette page (un compte Google est aussi requis). Lisez les différentes remarques quant à l’utilisation de l’API, valider les notices légales et entrer le nom de domaine depuis lequel l’API sera appelée (cela peut bien sûr être localhost ou 127.0.0.1).

Attention si la clé n’est pas bonne vous ne pourrez pas utiliser l’API.

Un fois votre clé obtenue, Google vous fournit un exemple d’intégration de l’appel à l’API Google Maps.
La balise suivante doit se trouver dans le <HEAD> de toutes les pages qui inséreront les cartes Google Maps.

Par exemple :

<script xsrc="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAGrKrVTYvOAArcvEc7RkikRQOhA6XYTkMKiLr-GFNzA5v8MYfFhTIin2y-FSBu_nLsl58KPu9ySKs4A" mce_src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAGrKrVTYvOAArcvEc7RkikRQOhA6XYTkMKiLr-GFNzA5v8MYfFhTIin2y-FSBu_nLsl58KPu9ySKs4A"
type="text/javascript"></script>

Afficher une carte grâce à l’API Google Maps

D’abord il faut insérer dans votre page un <DIV> où sera inséré la carte Google Maps. Attribuer à ce <DIV> une taille et un id.

Par exemple :

<div id="map" style="width: 400px; height: 400px"></div>

Pour afficher une carte il est nécessaire d’instancier (de créer) un objet « carte » grâce à la class Gmap2().

En argument, vous devez passer le div (container) où vous souhaitez insérer la carte :

var map = new GMap2(document.getElementById("map"));

Ensuite, il faut indiquer à l’objet carte où elle doit se centrer en utilisant la méthode setCenter(). En argument vous devez indiquer les coordonnées géographiques (latitude x et longitude y ) à travers l’objet GLatLng() ainsi que le niveau d’échelle ainsi si besoin le type de carte.

map.setCenter(new GLatLng(48.881986, 2.420829), 10);

Et voilà, vous avez tout ce qu’il vous faut pour afficher une carte. En résumé, voici le script complet :

<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script xsrc="http://maps.google.com/maps?file=api&v=2&key=abcdefg" mce_src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">

function load() {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(48.881986, 2.420829), 13);
}

</script>
</head>
<body onload="load()">
<div id="map" style="width: 400px; height: 400px"></div>

</body>
</html>

Dans cet exemple, la création de la carte se fera lors du chargement complet de la page à travers la fonction load() pour éviter des problèmes de chargement.

Voici la première partie, d’autres vont suivre pour expliquer les intéractions possibles avec la carte. N’hésitez pas à laisser des commentaires! :-)

Tags :

Partager sur :


15 commentaires

Laissez un commentaire!

  obligatoire

  obligatoire

← Billet précédent : Billet suivant : →