Jan
7

API Google Maps : distance entre deux points


Il y a quelques jours, Google a mis en place un nouveau concept dans son API (v3) de Google Maps : la possibilité de charger des fonctionnalités supplémentaires en invoquant une bibliothèque (library, en anglais) spécifique.

Détaillons un peu cette nouveauté à travers un exemple simple de calcul de distance entre deux points.

L’avantage de ce concept est de ne pas surcharger votre application si vous n’avez pas besoin de ces fonctionnalités supplémentaires. La première bibliothèque disponible est Geometry.

Geometry contient des fonctions permettant d’effectuer des calculs liés aux distances sur les cartes (distance entre deux points, coordonnées d’un point d’après un offset et un point connu, …).

Maintenant, passons à un exemple : comment calculer très simplement la distance en kilomètres entre 2 points connus (comme sur Distancity) ?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
 html { height: 100% }
 body { height: 100%; margin: 0px; padding: 0px }
 #map_canvas { height: 100% }
</style>
<script type="text/javascript"
 src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false">
</script>
<script type="text/javascript">
 function initialize() {
 var point1 = new google.maps.LatLng(48.52, 2.19);      // Paris
 var point2 = new google.maps.LatLng(40.39, -73.56);    // New York
 var myOptions = {
 zoom: 3,
 center: point1,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById("map_canvas"),
 myOptions);
 
 var marker1 = new google.maps.Marker({
 position: point1,
 map: map
 });
 
 // On place un second marqueur au niveau de New York
 var marker2 = new google.maps.Marker({
 position: point2,
 map: map
 });
 
 // Calcul de la distance entre Paris (point1) et New York (point2)
 var distanceKm = google.maps.geometry.spherical.computeDistanceBetween(point1, point2);
 distanceKm = distanceKm/1000;
 }
 
</script>
</head>
<body onload="initialize()">
 <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Commentons un peu ce code :
Vous remarquez d’emblée que le chargement de la bibliothèque est extrêmement simple, puisqu’il suffit d’ajouter un paramètre libraries lors de l’appel de l’API Google Maps et de spécifier la liste des bibliothèques à charger :

<script type="text/javascript"
 src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false">
</script>

On définit ensuite deux points point1 et point2 d’après les coordonnées GPS de Paris et New York. Les markers ne sont là que pour visualiser ces points.

Enfin, on calcule la distance (en mètres) entre les deux points grâce à la fonction computeDistanceBetween, puis on convertit en km.

Je suis vraiment impressionné par la quantité de choses qu’on peut faire avec Google Maps API, et aussi par la simplicité d’utilisation. Pour l’instant, il n’y a pas d’autres bibliothèque que Geometry disponible, mais je pense que si Google a mis en place ce système de libraries, c’est probablement parce qu’ils ont l’intention d’en fournir de nouvelles prochainement.



Poster un commentaire

Edito

Bienvenue sur Mémorandom.

Mémorandom est le blog de 2 développeurs web, Appo et Nico.

Vous y trouverez des informations sur différents domaines touchant de près ou de loin au développement web

Tutoriels Yii Framework

Nos derniers articles

Blogs Dev

Liens

Étiquettes