Google Maps API

Distance entre 2 points ou point dans un rayon

NoSmoking 2013-01-13

Explication

Pour tester la distance entre deux points, on utilise la méthode computeDistanceBetween mise à disposition par la librairie geometry. Cette méthode est liée au namespace google.maps.geometry.spherical.

La librairie geometry n'étant pas chargée par défaut, il ne faut pas oublier de l'intégrer à votre document.

<script src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>

Cette fonction retourne la distance entre les deux points, au format google.maps.LatLng, passés en paramètre.

var distance = google.maps.geometry.spherical.computeDistanceBetween( oLatLng1, oLatLng2);

Mise en application

Dans l'exemple qui suit l'utilisation du cercle ne sert qu'à visualiser le résultat en déterminant un point, son centre, et une distance, son rayon.

Si un marker se trouve dans le cercle il sera vertmarker_green.pngdans le cas contraire il sera rougemarker.png.

On pourrait également décider de rendre, ou non, visible le Marker suivant sa distance au centre.

En cas de modification de la position du cercle, ou de son diamètre, on recalcule les distances par rapport à ce "nouveau" cercle.

Double cliquez sur la carte, dans ou hors du cercle, pour créer des markers.

Ensuite jouez avec le cercle en le déplaçant, en augmentant ou réduisant son rayon. Les markers changeront de couleur en fonction du fait qu'ils sont ou non dans le cercle, donc en fonction de leur distance au centre du cercle.

Code de la fonction

function drawMarker( marker, origine, rayon){
  // calcul distance
  var distance = google.maps.geometry.spherical.computeDistanceBetween( origine, marker.getPosition());
  // ici on joue sur la couleur du marker
  var icone = (distance > rayon) ? oRedIcone : oGreenIcone;
  // affectation icone qui va bien
  marker.setOptions({'icon' : icone});
  // ajout distance au survol
  var km = (distance/1000).toFixed(3) +' km';
  marker.setOptions({'title' : km});
}
Mise à jour : Janvier 2014