Tutorial API Google Maps (1ère partie)
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! 
Olivier Masselis
a écrit le 23 octobre 2006 à 11:24
Les API google maps sont formidables, mais il faut que la communauté des développeurs prennent conscience qu’en aucun cas “Cette application cartographique en javascript n’est totalement gratuite”. Nous sommes pour l’instant dans la phase béta gratuite que Google a l’habitude d’utiliser pour lancer ses nouveaux produits et écraser la concurrence. Mais cela ne vas pas durer comme j’en parle dans mon blog http://visionair.wordpress.com, pour la simple raison que Google n’est pas une association caritative.
D’ailleurs la semaine dernière Google a enfin précisé en français ses conditions d’utilisation: soit vous accepter de la publicité sur vos cartes, soit vous payez, et le forfait minimum est 10 000 euros.
Yann
a écrit le 23 octobre 2006 à 11:41
Excellent tuto. Connaissez vous http://www.housingmaps.com un Mash-UP entre Craig’s List et Google Maps. Ce type de service est vraiment très sympa. Un bon Mix d’API et d’Ajax sur fon de web 2.0. Je ne maîtrise pas encore Ajax mais voici un exemple relativement simple mis en place sur mon site d’immobilier –> http://www.immobilier-des-particuliers.com/carte-immobilier-france.php.
Qu’en pensez vous ?
Renaud
a écrit le 23 octobre 2006 à 21:56
Merci pour vos commentaires
Olivier > il est vrai qu’il ne faut pas oublié que la publicité contextuelle va un jour pointer le bout de son nez sur Google Maps… Il faudra voir comment se comporte la concurrence.
Yann > Housing Maps est le premier ‘mashup’ Google Maps. Les services immobiliers en France avec un cartographie performante sont encore qu’Ã leur balbutiement… Je ne manquerez pas de parler de immobilier-des-particuliers dans un prochain post…
Hubert Guillaud
a écrit le 26 octobre 2006 à 22:49
On attend avec impatience la suite des cours.
Mylena
a écrit le 11 juin 2007 à 14:52
Bonjour,
Très bien ce petit article!
J’utilise actuellement l’API Google Maps pour géocoder des adresses à la volée sur une carte grâce à un script qui va récupérer les données dans une base de données.
J’ai cependant un petit problème. Quand il s’agit de géocoder des adresses sur Paris il n’y a aucun problème mais dès que je passe en Ile de France ou en régions les géocodes qui me sont renvoyés sont tous de 0-0…
Quelqu’un a déjà rencontré ce problème avec l’API Google Maps? Sachant que lorsque je copie/colle mes adresses dans Google Maps il n’a aucun mal à les localiser..
Merci
leremoir
a écrit le 12 juin 2008 à 12:27
Bonjour,
Après avoir lu votre superbe tutoriel, je me permets de vous contacter afin de vous exposer mon problème.
j’ai voulu faire un test de googlemap avec un multidomaine (domaine monsite2 redirigé vers l’hébergement principal monsite1 sous forme www/monsite2)
Si je génère une clé Googlemap pour www.monsite1.com et que j’installe le tout ça marche nickel.
Si je teste sur www.monsite2.com (qui lui est redirigé de façon invisible sur www/monsite2/) que ce soit avec une clé “www.monsite1.com” ou une clé “www.monsite2.com”, ça ne marche pas!
il doit y avoir un problème lié au multidomaine je crois…