Initiation à Google Map API V3

14 octobre 2012 par korvus | Catégorie: Boulot

Contexte de publication

Cet article a été publié avant 2022, donc avant l'essor de l'IA générative. Certaines informations peuvent aujourd'hui être obsolètes. Les dessins et visuels d'époque présents ici ont été réalisés sans assistance de l'intelligence artificielle.

Vous aussi, vous avez probablement eu envie de tripoter l’API de Google pour faire des cartes personnalisées !
En tout cas, c’est ce qui m’arrive régulièrement. C’est suite à ce pénible constat de devoir toujours refaire les mêmes recherches que je vais ici décrire les techniques de base pour se plonger dans l’API, avec l’exemple d’une petite application qui permet d’obtenir facilement la longitude et la latitude d’un marker qu’on peut drag’n’dropper sur une carte Google. Exemple ici.

Les pré-requis :
– Connaissance (au moins superficielles) du JavaScript. On n’utilisera pas de bibliothèque type jquery dans cet exemple, car inutile.
– Connaissance HTLM et du CSS en général.
– Un compte Google.

Obtention de la clé

Pour commencer, il va vous falloir obtenir une clé qui permettra à Google de savoir qui appellera les scripts pour déployer son application, et… vous faire payer au-delà d’un certain quota (25 000 requêtes / jours). Pour ce faire, rendez-vous sur cette page.

Pour retrouver toutes les explications, vous pouvez consulter la page de doc officielle en anglais.

Démarche pour obtenir la clé google map API v3

En 1 : Cliquez sur « Service ». Si vous n’avez jamais utilisé aucune API de Google auparavant, celui-ci vous demandera de créer un projet (en 0).
En 2 : Cherchez parmi le choix des API celle qui nous intéresse, à savoir Google MAP V3, et activez-la en débloquant le loquet associé. Notez en passant la limitation de la gratuité à 25000 requêtes par jour.
En 3 : Cliquez enfin sur « API access » qui vous permettra d’obtenir la clé (4) qui va vous être utile pour l’appel du script.

Appel des scripts chez Google !

Sur la page HTML, il est venu le moment d’appeler les javascripts nécessaires.
On appelle respectivement le script de l’API GG map, et en deux le script sur lequel nous allons écrire notre script, que vous avez préalablement créé (ici « monscript.js »).

<!-- Google map --!>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSydghfoprhopegnpFGFDGOegfdxdfg654Gus&sensor=false"></script>



<!-- votre script --!>
<script type="text/javascript" src="dossier/monscript.js"></script>

Notez que pour l’API, vous devez passer en paramètre la fameuse clé précédemment récupérée, et qu’il y a en plus un second paramètre obligatoire, « sensor ». Celui-ci indique si notre script compte utiliser la géolocalisation ou pas. Étant donné qu’ici ce n’est pas le sujet, nous le mettons à false.

Et après ?

C’est bien beau, mais qu’est-ce qui prouve que cela fonctionne ? Très bonne question. Nous allons donc d’abord afficher une carte, pour voir s’il n’y a pas d’erreur déjà.
Pour ce faire, créer un noeud DOM quelconque avec un identifiant (attribut ID) dans votre page :

<body>
<div id="magooglemap">

</div>
</body>

Ensuite, styler au minimum ce div, afin de lui donner une surface d’affichage. Disons, 600 pixels de large par 400 pixels de haut, par exemple. Dans une feuille de style à part ou directement dans la page, là n’est pas le sujet de l’article.

#magooglemap{width:600px;height:400px;}

Enfin, en JavaScript, posons les jalons de l’affichage de la carte. Allez sur votre fichier javascript « monscript.js », puis créez d’abord la fonction qui permet d’initialiser la carte :

function initialisation(){
        coordonnees = new google.maps.LatLng(0,0);

	var optionsCarte = {
		zoom: 5,
		center: coordonnees,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	
	maCarte = new google.maps.Map(document.getElementById("magooglemap"), optionsCarte);
}

Cette fonction crée un objet MAP (‘new google.maps.Map’) auquel on passe en paramètre respectivement le noeud DOM qu’on a créé, identifié par son ID (magooglemap), ainsi qu’un objet de variables nécessaires pour l’initialisation de la carte, contenant son niveau de zoom, par rapport à quelles coordonnées (très important, créer une variable contenant l’objet des coordonnées). Ici, dans l’exemple, elle est nommée « coordonnees ». Elle est centrée (new google.maps.LatLng(0,0)), et son mode de rendu est ici « ROADMAP ».

Le zoom est une valeur comprise entre 0 et 18 (doc). Plus il est proche de 0, plus la vision est éloignée.
Center accepte comme paramètre un objet LatLng qui doit recevoir comme paramètre une valeur numérique représentant la latitude et la longitude. Dans notre exemple, nous avons mis 0 et 0, ce qui devrait centrer la carte au niveau de l’équateur pour la latitude, et au méridien de Greenwich pour la longitude.
Pour le type de MAP (mapTypeId), Google nous propose différents types de représentations, à savoir :
- ROADMAP : La vision 2D classique par défaut, que tout le monde connaît en général.
- SATELLITE : La vision photographie satellite, avec différents niveaux de résolution en fonction des pays.
- HYBRID : Mélange entre vues photographiques et superposition des principales infrastructures.
- TERRAIN : Se concentre sur le relief et les noms des formations géologiques et naturelles en général.

Et là, vous essayez d’afficher votre page, mais ça ne fonctionne pas…
Normal, car il faut que vous appeliez votre fonction ! Appelez-la lors du chargement du corps de votre page. Dans votre fichier javascript, ajouter la ligne suivante :

window.onload = initialisation;

And « Voilà ». Vous devriez avoir ceci s’afficher :

exemple basique d’initialisation de google map

Un petit marqueur maintenant !

Mais ce n’est pas fini ! Maintenant, il faut créer le petit marqueur qui permet à l’utilisateur de bien déterminer où est-ce qu’on se situe ! Étant donné qu’il s’agit d’un marqueur qu’on peut directement mettre lors de l’initialisation de la carte, nous pouvons directement intégrer le code de création de ce marqueur dans la fonction initialisation. Ce qui donne :


function initialisation(){
	origin = new google.maps.LatLng(0,0);

	var optionsCarte = {
		zoom: 5,
		center: origin,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	
	maCarte = new google.maps.Map(document.getElementById("map"), optionsCarte);

	marker = new google.maps.Marker({
		map:maCarte,
		position: origin
	});
        
	
}

On constate qu’on passe deux paramètres indispensables (en sachant néanmoins que le paramètre « map » n’est pas obligatoire sous cette forme, mais bien plus pratique néanmoins. Voir la doc à ce sujet.)

le paramètre map lie le marqueur à une page. Il doit donc recevoir en paramètre l’objet préalablement défini de la carte. Ici, « maCarte ».
Le paramètre position permet, comme son nom l’indique, de placer géographiquement ce point sur la carte, avec l’aide d’un objet LatLng. Dans l’exemple, nous reprenons celui qui nous a servi à centrer la carte, ce qui fait que le marqueur va automatiquement se retrouver au centre de la carte que nous avons créée.

Nous voici donc avec ceci :

Carte Google map avec marker

Rendre le marqueur déplaçable.

C’est bien beau tout ça, mais le marqueur est on ne peut plus fixe, non ? Oui, et vous avez bien raison ! Pour le rendre déplaçable, il faut lui ajouter l’événement « drag ». Pour ce faire, ajouter-le dans la liste de ses variables :


	marker = new google.maps.Marker({
		map:maCarte,
		draggable:true,
		position: origin
	});

And Voilà !

Appeler une fonction lors du mouvement du marqueur

Maintenant, il va falloir trouver comment « capter » l’événement « drag and drop », et lui associer une action ! Pour ce faire, on dispose de la méthode « addListener ». Et avant d’aller plus loin, créons déjà la fonction qui sera associée à cet événement. Imaginons donc une fonction « afficherUneInfoBulle ».

function afficherUneInfobulle(){
	var infowindow = new google.maps.InfoWindow({
		content: "<strong>hop !</strong>"
	});
	infowindow.open(maCarte,marker);
}

Que fait cette fonction ? Elle instancie une classe « InfoWindow », prenant en paramètre le paramètre « content » qui comprend une chaîne de caractères. Ici, « <strong>hop !</strong> ».

Il ne vous reste plus qu’à attacher cette action « afficherUneInfobulle » à l’événement « drag and drop ».
Pour ce faire, ajouter dans la fonction initialisation :


function initialisation(){
	origin = new google.maps.LatLng(0,0);

	var optionsCarte = {
		zoom: 5,
		center: origin,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	maCarte = new google.maps.Map(document.getElementById("map"), optionsCarte);
	
	marker = new google.maps.Marker({
		map:maCarte,
		draggable:true,
		position: origin
	});
        google.maps.event.addListener(marker,'dragend',afficherUneInfobulle);
}

Maintenant, lorsque vous déplacez le marqueur, cela fait apparaître une infobulle contenant un « hop » en gras !

Attention, bon à savoir

Dernière étape

Maintenant, il ne s’agit plus que d’afficher les coordonnées du marqueur, lors du lâcher du drag and drop, à la place de la chaîne « hop ! ».
Tout se joue donc dans la fonction « afficherUneInfobulle ».
Pour récupérer les coordonnées du marqueur, en bidouillant un peu avec l’aide de la fonction magique « console.log », on découvre rapidement que l’objet « marker » contient de nombreuses propriétés et objets, donc la propriété « position », qui, elle-même, contient les propriétés Latitude et Longtitude, sous la dénomination $a. Attention, ces valeurs changent constamment, ne facilitant pas notre boulot, je vous conseille donc d’appliquer un script qui récupère dynamiquement ces valeurs, comme j’ai pu le faire dans l’exemple mis sur le dépôt github !!!!

Console log sur l’objet marker de google map v3

Ainsi, il suffit de récupérer leurs propriétés et de remplacer dans la chaîne de l’infobulle pour les afficher. Ce qui donne, avec un peu de pommade :


function afficherUneInfobulle(){

/* Fonction qui récupére les coordonnées X et Y en parcourant l'objet google map */


   var inc = 0;
   for(var coords in marker.position){
         inc++;
         if(inc==1){
              var posX = marker.position[coords];
         }else if(inc==2){
              var posY = marker.position[coords];
         }else if(inc>2){
              break;
         }
    }

	var aAfficher = "Latitude : "+posX+'<br />Longtitude : '+posY+"<br />new google.maps.LatLng("+marker.position.Za+","+marker.position.Ya+");";

	var infowindow = new google.maps.InfoWindow({
		content: aAfficher
	});

	infowindow.open(maCarte,marker);
}

Et là, normalement, lors d’un drag and drop :

rendu final

Pour rappel, la démo complète, c’est ici.
Et pour télécharger l’exemple complet, c’est ici.

Blog