Ce tutoriel vous explique comment calculer les coordonnées d'un point placé sur une trajactoire, et situé à X % de la longueur du parcours depuis le point de départ.
Carte Google Maps
Départ : Latitude : - Longitude : 
Arrivée : Latitude : - Longitude : 
Parcours : Ligne bleue
Point intermédiaire calculé situé sur le parcours à 70% du point de Départ : Latitude : - Longitude : 
Exemple de code
<!DOCTYPE html>
<html>
<head>
<title>Titre de votre page</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
#info {
background: #fff;
padding: 5px;
font-size: 14px;
font-family: arial;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
<script type="text/javascript">
function initialize () {
/**
* Dans cet exemple on souhaite connaître l'emplacement du point intermédiaire :
* - localisé entre deux point connus : pointDepart et pointArrivee,
* - situé à 70% du parcours par rapport au pointDepart (chiffre entre 0 et 1).
*/
var distanceFractionnaire = .70;
var pointDepart = new google.maps.LatLng(47.390273,0.688834);
var pointArrivee = new google.maps.LatLng(37.316864,141.024928);
var pointIntermediaire = google.maps.geometry.spherical.interpolate(pointDepart, pointArrivee, distanceFractionnaire);
var limites = new google.maps.LatLngBounds();
limites.extend(pointDepart);
limites.extend(pointArrivee);
limites.extend(new google.maps.LatLng(70.407348,66.796875));
limites.extend(pointIntermediaire);
var optionsCarte = {
zoom: 4,
center: pointDepart,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
var marqueurDepart = new google.maps.Marker({
map: maCarte,
icon: new google.maps.MarkerImage("http://static.touraineverte.com/marqueurDvert.png", new google.maps.Size(24, 38), new google.maps.Point(0,0), new google.maps.Point(11, 37)),
position: pointDepart
});
var marqueurArrivee = new google.maps.Marker({
map: maCarte,
icon: new google.maps.MarkerImage("http://static.touraineverte.com/marqueurArouge.png", new google.maps.Size(24, 38), new google.maps.Point(0,0), new google.maps.Point(11, 37)),
position: pointArrivee
});
var marqueurIntermediaire = new google.maps.Marker({
map: maCarte,
icon: new google.maps.MarkerImage("http://static.touraineverte.com/pegman.gif", new google.maps.Size(16, 31), new google.maps.Point(0,0), new google.maps.Point(7, 30)),
position: pointIntermediaire
});
var nordVraiCap = new google.maps.Polyline({map:maCarte,path:[pointDepart,pointArrivee],strokeColor:"#0000FF",geodesic:true});
document.getElementById("origineLat").innerHTML = pointDepart.lat().toFixed(6);
document.getElementById("origineLng").innerHTML = pointDepart.lng().toFixed(6);
document.getElementById("destinationLat").innerHTML = pointArrivee.lat().toFixed(6);
document.getElementById("destinationLng").innerHTML = pointArrivee.lng().toFixed(6);
document.getElementById("intermediaireLat").innerHTML = pointIntermediaire.lat().toFixed(6);
document.getElementById("intermediaireLng").innerHTML = pointIntermediaire.lng().toFixed(6);
maCarte.fitBounds(limites);
}
</script>
</head>
<body onLoad="initialize()">
<div id="EmplacementDeMaCarte" style="width:100%;height:300px"></div>
<div id="info">
<b>Départ</b> : Latitude : <span id="origineLat"></span> - Longitude : <span id="origineLng"></span> <img src="http://static.touraineverte.com/marqueurDvert.png" alt="Départ" width="10" height="16"/><br/>
<b>Intermédiaire</b> situé à 70% du point de <b>Départ</b> : Latitude : <span id="intermediaireLat"></span> - Longitude : <span id="intermediaireLng"></span> <img src="http://static.touraineverte.com/pegman.gif" alt="Départ" width="7" height="14"/><br/>
<b>Arrivée</b> : Latitude : <span id="destinationLat"></span> - Longitude : <span id="destinationLng"></span> <img src="http://static.touraineverte.com/marqueurArouge.png" alt="Départ" width="7" height="14"/><br/>
<b>Parcours</b> : <span style="color:blue"> Ligne bleue </span>
</div>
</body>
</html>