Nous allons dans cet article tenter d'expliquer les principes de bases de l'utilisation de l'api google maps. Les possibilités offerte par google maps sont nombreuses et nous nous contenteront de créer une application basique permettant d'afficher des marquer sur la carte.

Il est fortement conseillé d'étudier la documentation de l'api google maps et de comprendre les nombreux exemples fournis avant de lire cet article.

Sachez tout d'abord qu'il vous sera impossible de tester votre application en local. L'utilisation de google map nécessite l'obtention du clef qui est directement lié au nom de domaine du site. La démarche est très rapide et vous obtiendrez votre clef instantannément. Obtenir ma clef google maps

Vous devez dans un premier temps appeler le script qui chargera l'api google. Ce script est hébergé sur l'un des serveur google. Il faut indiquer votre clef google maps afin que google verifi qu'elle correspond bien au nom de domaine auquel elle est lié.

<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=placez_ici_votre_clef_google_maps"
            type="text/javascript"></script>

Le but de script est d'afficher sur la carte differents marker selon le zoom effectuer par l'utilisateur. Les marker représentant les pays s'afficheront du plus petit zoom possible (1) jusqu'au zoom 4. Les marker représentant les région s'affciheront à partir du zoom 5 jusqu'au plus grand zoom possible.

Ainsi si vous entrer 5 adresse pour la ville de rouen, il ne s'afficheront que lorsque vous aurez suffisament zoomer pour afficher la france en gros. Cela évite l'entassement de marker qui rend la carte illisible et fait ramer l'application.

<script type="text/javascript">
//déclaration des variables
var map = null;
var geocoder = null;
var mgr= null;
var batchEtbl=[];//ce tableau stockera les markers des adresses
var batchPays=[];//ce tableau stockera les markers des pays
 
//Nous crééons ici deux tableaux qui vont indiquer les adresse et les pays à afficher sur la carte
//A vous de voir la méthode à utiliser pour générer ces tableaux (à partir d'une base de donnée par exemple).
// ATTENTION LES INFOS ENVOYEES DANS LES TABLEAUX DOIVENT ETRE ENCODEE EN UTF8
var pays=[];
var etbl = [];
etbl[0]=[2,"7 impasse du pré la motte 27370 le thuit-signol"];
etbl[1]=[5,"30 rue proudhon 76500 elbeuf"];
etbl[2]=[7,"Marseille"];
etbl[3]=[8,"Rouen"];
etbl[4]=[9,"zorkunak"];//Ce lieu n'existe pas il ne sert que de test pour verifier que notre script ne bug pas si une adresse mal formulé ou inexistante est inséré dans nos tableaux.
etbl[5]=[15,"Paris"];
pays[0]=[10,"France"];
pays[1]=[11,"Italy"];
pays[2]=[12,"Spain"];
 
function load() {
  if (GBrowserIsCompatible()) {//Si le navigateur est compatible 
	map = new GMap2(document.getElementById("map"));//création de l'objet map
	map.addControl(new GSmallMapControl());//ajout des controles de zoom et déplacement au format mini
	map.setCenter(new GLatLng(47.4419, 2.1419), 5);//positionnement initial de la map (ici la france) 
	geocoder = new GClientGeocoder();//création de l'objet geocoder (nécessaire pour la localisation des adresse)
	createMarkersPays(0);//lancement de la fonction permettant de créer les markers des pays
	mgr = new GMarkerManager(map);//on créer un marker manager//création d'un manager de marker
  }
}
function createMarkersPays(i) {  
	  geocoder.getLatLng(pays[i][1],function(point) {//on récupère la longitude et la latitude de l'adresse donnée
			if (point) {//si les coordonnées existe
				var marker=new GMarker(point);//on créé le marker				
				batchPays.push(marker);//on enregistre le marker dans le tableau batchPays
 
                                //création des onglets de l'info bulle 
				var infoTabs = [
				new GInfoWindowTab("Adresse", pays[i][1]),
				new GInfoWindowTab("id marker", "Marker #<b>" + pays[i][0] + "</b>")
				];
				//a jout d'un écouteur de click sur le marker, le click affichera l'infobulle
				GEvent.addListener(marker, "click", function() {
					marker.openInfoWindowTabsHtml(infoTabs);
				});
			}
				if (i+1<pays.length) {//si i est inférieur au nombre de pays compris dans le tableau pays
					createMarkersPays(i+1);//on relance la fonction
				}
				else {//sinon
					mgr.addMarkers(batchPays, 1,4);//on ajoute le lot de marker pays au marker manager
					createMarkersEtbl(0);//on lance la création des marker des établissement
				}
	   });
}
 
//la fonction createMarkersEtbl fonctionne semsiblement de la même manière que la fonction createMarkerPays a l'exception de mgr.refresh à la fin
function createMarkersEtbl(i) {
	 geocoder.getLatLng(etbl[i][1],function(point) {
		if (point) {
			var marker=new GMarker(point);
			//on enregistre le marker dans le tableau batch
			batchEtbl.push(marker);
			//création des onglets de l'info bulle 
			var infoTabs = [
			new GInfoWindowTab("Adresse", etbl[i][1]),
			new GInfoWindowTab("id marker", "Marker #<b>" + etbl[i][0] + "</b>")
			];
			//ajout d'un écouteur de click sur le marker, le click affichera l'infobulle
			GEvent.addListener(marker, "click", function() {
				marker.openInfoWindowTabsHtml(infoTabs);
			});
		}
			if (i+1<etbl.length) {
				createMarkersEtbl(i+1);
			}
			else {
				mgr.addMarkers(batchEtbl, 5);//on ajoute le lot de marker etablissement au manger créé dans createMarkerPays
				mgr.refresh();//on refresh le manager marker ce qui a pour effet d'afficher les marker
			}
	   });
}
</script>

Certaines fonctions sont simple à comprendre et je vous renvoie vers la documentation pour comprendre leur principe. La réelle difficulté de ce script est d'afficher des marker grace à leur adresse mais uniquement selon la valeur du zoom.

Pour créer un marker à partir d'une adresse il faut créer l'objet GClientGeocoder:

geocoder = new GClientGeocoder();

Il faut ensuite utiliser la methode:

getLatLng(address,callback(point) {})

Cette méthode fera un appel sur le serveur de google pour trouver la latitude et la longitude de l'adresse fourni par address et appelera en retour la fonction callBack avec comme arguments point qui contiendra la latitude et la longitude.

Pour n'afficher que certains markers par rapport au niveau de zoom il faut créer l'objet GMarkerManager:

mgr = new GMarkerManager(map);

Il faut ensuite lui ajouter des “lots” de markers accompagné du niveau mini et maxi de zoom pour lesquels ces markers doivent s'afficher.

mgr.addMarkers(batchPays, 1,4);
mgr.addMarkers(batchEtbl, 5);

Les tableaux batchPays et batchEtbl ont été remplis par les marker créé par les fonctions appelé en retour de getLatLng

  <body onload="load()" onunload="GUnload()">
 
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>

load lancera la création de la map.
Gload déchargera la map
<div id=map”> contiendra la carte

Cet article a pour but de fournir un exemple un peu plus détaillé et plus complet que ceux proposé par google. Il est néanmoins primordial d'étudier la documentation sans quoi vous risquer de ne pas être capable de réutiliser ou de modifier ce script à votre convenance.