Vous êtes dans une phase où votre site commence à prendre de l’ampleur et vous décidez de l’agrémenter en rajoutant une carte pour, par exemple, indiquer où se trouvent plusieurs points de ventes de votre société. Cela permettra à l’utilisateur de mieux situer ceux-ci pour plus tard générer un itinéraire de trajet. Il vous faudra donc au préalable une table qui contient la localisation GPS de chacun des bâtiments, afin qu’ils soient placés sur la carte lors de la génération. Mais ne brûlons pas les étapes, nous parlerons des marqueurs plus tard.
Nous allons utiliser principalement des exemples de la version 2 de Google Maps API (Application Programming Interface, pour « interface de programmation »), tout en montrant la correspondance dans la troisième version qui est apparue il y a déjà quelques mois. Pour rappel, les versions précédentes sont considérées comme dépréciées, même si on peut toujours les utiliser, ce qui est fortement déconseillé (pour des raisons de performances, de sécurité, et de fonctionnalités).
Générer la clé d’API
Il était nécessaire, avant l’arrivée des nouvelles interfaces, de générer une clé pour utiliser l’API. Celle-ci était valable pour un domaine uniquement, et devait être changée à partir du moment où l’adresse IP du serveur changeait. Il était donc possible de générer cette clé sur le site officiel de Google Maps.
Le canvas HTML
Pour notre exemple nous pouvons utiliser une page XHTML 1.0. classique ou bien HTML 4.0. Cependant si l’on suit l’évolution des navigateurs et des langages, nous utiliserons une page HTML5, dans laquelle on devra spécifier le tag « doctype » qui, notons-le, s’avère être bien plus simple syntaxiquement parlant. La structure d’une page ressemblera alors à :
<!DOCTYPE html>
<html>
<head> ...</head>
<body onload="...">
...
</body>
</html>Une page sans « doctype« , ce qu’il y a de plus classique, ressemblera à ceci :
<html>
<head> ... </head>
<body>
<div id="..." style="...">
</div>
</body>
</html>Inclure l’API dans la page
Il est donc temps d’inclure et charger l’API de Google dans notre page HTML. Il existe plusieurs méthodes. On peut, avec la version 2, charger dynamiquement ou statiquement le script.
Version 2
Dans cette version, une chose importante à noter : la variable API_KEY correspond à la clé générée précédemment. De plus, le script est chargé dynamiquement, en utilisant de l’AJAX (du JavaScript asynchrone).
<script type="text/javascript" src="http://www.google.com/jsapi?key=API_KEY"></script>Le script suivant permet un chargement statique. La page sera chargée entièrement une fois le script totalement chargé. Encore une fois, il est nécessaire de spécifier la clé reçue lors de l’inscription.
<script src="http://maps.google.com/maps?file=api&v=2&key=API_KEY&sensor=false" type="text/javascript"> </script>Version 3
Dans la version 3 de l’API, on peut spécifier tout d’abord dans le tag « meta » si la carte doit être affichée en plein écran, ou si elle peut être redimensionnée par l’utilisateur. Ensuite, on charge le script de la même manière que ci-dessus, mais cette fois sans spécifier de clé. Quant au senseur, il permet de déterminer la localisation de l’utilisateur si on le place sur la valeur « vrai« . Remarque : cette nouvelle version a introduit un paramètre « libraries » supplémentaire qui permet de charger des bibliothèques supplémentaires.
<meta name="viewport"
content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>Intégrer la carte à la page
Après avoir éventuellement défini un style pour le conteneur de votre carte, vous devez spécifier ce même conteneur. Idéalement, il faut utiliser une balise « div ». On va donc lui spécifier un identifiant particulier qu’on réutilisera pour définir les options de la carte et pour l’initialiser.
<div id="map" style="width: 700px; height: 400px;”></div>On crée donc un conteneur d’une taille de 700 pixels de large et 400 pixels de hauteur. Dans notre cas, il n’y a pas de feuille de style définie, puisque ceux-ci sont définis dans la balise. Bref, maintenant que le conteneur est défini, il faut initialiser la carte afin qu’elle s’affiche dans cet espace pour le moment vide.
Initialiser la carte
Version 2
Si le chargement se fait dynamiquement, il faut appeler une fonction avant d’initialiser la carte. On précise l’API à charger et la version de celle-ci, ensuite on indique qu’il faut lancer la procédure d’initialisation de la carte uniquement quand l’API est entièrement chargée en mémoire (callback).
<script type="text/javascript">
google.load("maps", "2");
google.setOnLoadCallback(initMap);
function initMap() { ... }
</script>Ensuite, la procédure « initMap() » est chargée. Celle-ci est directement appelée quand on utilise l’appel classique. On initialise donc la carte dans son conteneur. Le code en commentaire est déprécié, il faut alors préférer la première solution (« new google.maps.Map2« ) qui est plus appropriée. La fonction « setCenter » permet de recentrer la position en spécifiant la longitude et la latitude, ainsi que le niveau de zoom.
function initMap()
{
var map = new google.maps.Map2(
document.getElementById('map')
);
map.setCenter(
new GLatLng(50.6113123, 5.5104172)
, 15);
}
Version 3
On exécute une fonction appelée initMap(), qu’on peut éventuellement appeler directement depuis le corps de la page (grâce à la propriété onLoad). Dans celle-ci, on initialise les options puis la carte.
Remarque : la version de l’API n’est plus indiquée dans le nom de la classe. On a donc une unification des noms pour les futures mises à jour à venir. Nous devons obligatoirement définir le type de la carte dans la version 3 si l’on veut bénéficier des contrôles associés par défaut.
Nous utilisons ici le type « ROADMAP« , en 2D (classique), avec un zoom de 8 et un recentrage sur la latitude et la longitude spécifiées dans la variable myLatlng, qui est un objet spécifique de l’API.
var myLatlng = new google.maps.LatLng( -34.397, 150.644 );
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map"),
myOptions
);Dans l’article suivant, nous verrons comment rajouter des marqueurs, des contrôles, et comment associer le tout avec un popup créé avec l’API Dojo, fournie par… Google !
En attendant, effectuez quelques tests avec des coordonnées différentes pour voir comment se comporte votre carte.
