Ce tutoriel vous montre comment calculer la distance à vol d'oiseau entre deux points à l'aide de computeDistanceBetween.
Dans cet exemple on calcule la distance à vol d'oiseau séparant Tours (FR) de Fukushima (JA).
Carte Google Maps
Exemple de code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8" />
<title>Titre de votre page</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
<script type="text/javascript">
function initialisation(){
var zoneContenantMarqueurs = new google.maps.LatLngBounds();
var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
var optionsCarte = {
zoom: 8,
center: centreCarte,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
var tours = new google.maps.LatLng(47.390273,0.688834);
var marqueurTours = new google.maps.Marker({map:maCarte, position:tours});
zoneContenantMarqueurs.extend(tours);
var fukushima = new google.maps.LatLng(37.316864,141.024928);
var marqueurFukushima = new google.maps.Marker({map:maCarte, position:fukushima});
zoneContenantMarqueurs.extend(fukushima);
var optionsPolylineDistance = {
map:maCarte,
path:[tours, fukushima],
geodesic:true
}
var polylineDistance = new google.maps.Polyline(optionsPolylineDistance);
var distance = google.maps.geometry.spherical.computeDistanceBetween(tours, fukushima);
maCarte.fitBounds(zoneContenantMarqueurs);
document.getElementById('info').innerHTML = "Distance Tours - fukushima : "+distance+" mètres";
}
google.maps.event.addDomListener(window, 'load', initialisation)
</script>
</head>
<body style="margin:0px; padding:0px;">
<div id="EmplacementDeMaCarte" style="width:100%; height:400px"></div>
<div id="info"></div>
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>