Blog

Initiation a Google Map API V3

Vous aussi, vous avez probablement eut 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 bases 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 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

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érésse, à savoir Google MAP V3, et activée là en débloquant le loquet associé. Noté en passant la limitation de la gratuité a 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écessaire.
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 si 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 a 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éer 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 a quel coordonnées (très important, créé une variable contenant l’objet des coordoné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 en 0 et 18 (doc). Plus il est proche du 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 mit 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érent type de représentations, à savoir :

    • ROADMAP : La vision 2D classique par défaut, que tout le monde connait en général.
    • SATELLITE : La vision photographie satellite, avec différents niveau de résolution en fonction des pays.
    • HYBRID : Mélange entre vus photographiques et superposition des principales infrastructures.
    • TERRAIN : Se concentre sur le relief et le noms des formations géologiques et naturelles en général.

Et là, vous essayer d’afficher votre page, mais ça ne fonctionne pas…
Normal, car il faut que vous appeliez votre fonction ! Appelez là 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

exemple basique d’initialisation de google map

Un petit marqueur maintenant !

Mais ce n’est pas finit ! 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éfinit 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éer.

Nous voici donc avec ceci :

Capture d'écran d'une carte Google map avec marker

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éplacable, 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’allez 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ère. 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éplacer 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 coordoné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é 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 put le faire dans l’exemple mit sur le dépôt github !!!!

Console log sur l'objet marker de google map v3

Console log sur l’objet marker de google map v3

Ainsi, il suffit de récupérer leur 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+'
Longtitude : '+posY+"
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

rendu final

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



3 commentaires pour “Initiation a Google Map API V3”

Laissez un commentaire