Calcul distance entre deux points

**Souleyre** · 20/11/2017, 16h13

Bonjour,
tout comme dans cette discussion : Calcul distance google maps
Je suis à la recherche d'un exemple dans lequel, cliquant sur un point puis cliquant sur un deuxième point, on obtiendrait la distance entre ces deux points.
Merci pour votre aide.

**Spartacusply** · 20/11/2017, 17h42

J'avoue c'est assez chaud, y'avait un clic à faire depuis le lien proposé par NoSmoking pour accéder aux exemples de la doc google maps, c'est pas donné à tout le monde

https://developers.google.com/maps/d...s-simple?hl=fr

**Souleyre** · 20/11/2017, 17h49

Merci pour ta réponse, Spartacusply, mais elle ne répond pas vraiment à ma question.

**Spartacusply** · 20/11/2017, 17h55

Non mais y'a quasiment tout là, faut pas pousser non plus...

Je t'invite à déboguer l'objet response pour t'en rendre compte. Allez un dernier lien après le seul requis demandé c'est de savoir lire, et en français uniquement en plus parce que la doc est traduite... https://developers.google.com/maps/d...ectionsResults

**Souleyre** · 20/11/2017, 18h09

En fait, je cherche une fonction similaire à celle qui existe dans Leaflet (voir image jointe).

**Spartacusply** · 20/11/2017, 18h57

Oui enfin là c'est du calcul à vol d'oiseau, pas d'itinéraire sinon il ferait le tour du rond point. Et si vraiment tu veux faire le tour du rond point pour 32 mètres je t'avoue clairement que je suis pas sur du résultat de l'API Google.

**Souleyre** · 20/11/2017, 19h08

Je n'ai jamais parlé d'itinéraire...
Seulement de distance entre deux points.

**ProgElecT** · 21/11/2017, 09h28

Salut

Une version perso, avec click bouton gauche pour designer 2 points sur la carte.
Nom : Distance.jpg
Affichages : 5855
Taille : 78,9 Ko

Le fichier MapGoogle.js

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
	"use strict"; // force la déclaration des variables
	var Carte, OldInfWindow, Adrs1, Latit, longi, Altit, Marker1, Marker2, MaLigne, dispo, lftl1;
	window.onresize = resizeon;
	window.onload = loadon;
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function loadon()
{
	dispo = extrat(document.getElementById("Pl").style.left) + 
			 extrat(document.getElementById("Pl").style.width) +
			 extrat(document.getElementById("Rs").style.right) + 
			 extrat(document.getElementById("Rs").style.width) + 24;
	//document.getElementById("result").innerHTML = dispo;
	lftl1 = extrat(document.getElementById("Ll").style.left);
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function extrat(don)
{
	var valeur = String(don);
	valeur = valeur.replace('px', '');
	valeur = (valeur * 1);  // *1 convertie en Number
	return valeur;
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function resizeon()
{
	var htf = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	htf = htf - 105;
	document.getElementById("macarte").style.height = htf +'px';
	var wf = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
	if (wf >= 1240) {
		var reste = (wf - dispo) / 2;
		reste =  reste.toFixed(0);
		var lftl2 = Number(lftl1) + Number(reste) + Number("6"); 
		document.getElementById("Ll").style.width = reste + 'px';
		document.getElementById("L2").style.left = lftl2 + 'px';
		document.getElementById("L2").style.width = reste + 'px';
	}
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function ChoixMap(value)
{
	switch (value) 
	{
    case 'TERRAIN':
		Carte.setMapTypeId(google.maps.MapTypeId.TERRAIN);
        break;
    case 'ROADMAP':
		Carte.setMapTypeId(google.maps.MapTypeId.ROADMAP);
        break;
    case 'SATELLITE':
		Carte.setMapTypeId(google.maps.MapTypeId.SATELLITE);
        break;
    case 'HYBRID':
		Carte.setMapTypeId(google.maps.MapTypeId.HYBRID);
	}
}	
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function zoomonchange()
{
Carte.setZoom(Number(document.getElementById("zoom").value));
}	
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function zoomonmouseup(event)
{
	var x = event.which || event.keyCode;
	var y = Number(document.getElementById("zoom").value);
	var z = Carte.getZoom();
	if ((x == 2) && (y != z)){Carte.setZoom(y)}; //bouton central de la souris
}	
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function initMap()
{
    var mapCanvas;
	mapCanvas = document.getElementById("macarte");
	//46.66451741754235,6.6066035 magland         48.471110997291696,1.501031219959259 CHAMPHOL          48.0228868,2.724609375 centre france
	var mapOptions = 
		{center: new google.maps.LatLng(48.0228868,2.724609375),
		//disableDefaultUI: true, // cacher ou non tous les controles
		mapTypeControl: false, // cacher ou non le choix des terrains
		zoomControl: false,	 // cacher ou non le zoom
		fullscreenControl: true, // cacher ou non le plein écran
		//streetViewControl: false, // cacher ou non le parcour filmé
		zoom: 6,
		mapTypeId: google.maps.MapTypeId.TERRAIN}; 
	Carte = new google.maps.Map(mapCanvas,mapOptions);
	//Ajouter un écouteur pour l'événement click sur la carte, pour affichage de l'adresse, l'altitude, la latitude et la longitude.
	Carte.addListener('click', function(event){if( !event.placeId){displayLocationElevation(event.latLng,'')}})  
 
	var input = document.getElementById('pacinput');
	var autocomplete = new google.maps.places.Autocomplete(input);
	autocomplete.bindTo('bounds', Carte);
	autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();
	if (!place.geometry)
	{
		return; // proposition d'un lieu non valide quitte la procedure
    }
    if (place.geometry.viewport)
		{
		} else {
		map.setCenter(place.geometry.location); 
		map.setZoom(14);
		document.getElementById('zoom').selectedIndex = 6;
		}
	displayLocationElevation(place.geometry.location,place.formatted_address);
  });
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function getLocation(){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else { 
        alert('Geolocation non supprotée par votre navigateur.');
    }
}		//---------------------------------------------------------
function showPosition(position){
	Carte.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
	//Carte.setCenter(new google.maps.LatLng(position.coords.latitude,position.coords.longitude));
	Carte.setZoom(12)
	document.getElementById('zoom').selectedIndex = 5;
}		//---------------------------------------------------------
function showError(error) {
    switch(error.code){
        case error.PERMISSION_DENIED:
            alert('Utilisateur a rejeté la demande de géolocalisation.');
            break;
        case error.POSITION_UNAVAILABLE:
            alert('Informations sur la localisation ne sont pas disponibles.');
            break;
        case error.TIMEOUT:
            alert('La demande pour obtenir l’emplacement de l’utilisateur a expiré.');
            break;
        case error.UNKNOWN_ERROR:
            alert('Une erreur inconnue s’est produite.');
            break;
    }
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function Centrer1()
{
	if (document.getElementById("adrss1").innerHTML == '' ) return;
	Carte.setCenter(new google.maps.LatLng(document.getElementById("lat1").innerHTML,document.getElementById("lon1").innerHTML));
	//Carte.setZoom(11)
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function Centrer2()
{
	if (document.getElementById("adrss2").innerHTML == '' ) return;
	Carte.setCenter(new google.maps.LatLng(document.getElementById("lat2").innerHTML,document.getElementById("lon2").innerHTML));
	//Carte.setZoom(11)
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function displayLocationElevation(location,NamePlace)
{
	if (typeof(OldInfWindow) != 'undefined') OldInfWindow.close();// permet de fermer l'infos que j'ai instancié precedement
	var MyArr =  String(location);
	var CvString = MyArr.replace("(",""); CvString = CvString.replace(")","");
	var Tbl = CvString.split(",");
	var latlng = {lat: parseFloat(Tbl[0]), lng: parseFloat(Tbl[1])};
	var Latitude = Math.round(Tbl[0]*100)/100;
		Latit = Tbl[0];
	var Longitude = Math.round(Tbl[1]*100)/100;
		longi = Tbl[1];
	var InfText1, InfText2;
	//------------------------------------------------------------------------------------------------------------
	if (NamePlace != '')
		{
		InfText1 = NamePlace;
		Adrs1 = InfText1;
		ActuAffichage(InfText1,InfText2,location);
		}else{
		var geocoder = new google.maps.Geocoder;
		//Lancer la requête pour recuperer l'adresse (code postal,commune et pays)
		geocoder.geocode({'location': latlng}, function(results, status)
		{
		if (status === google.maps.GeocoderStatus.OK)
			{
			if (results[1]) //Récupérer le deuxieme element 
				{
				CvString = results[1].formatted_address;
				InfText1 = CvString.replace("Unnamed Road,", " ");
				Adrs1 = InfText1;
				ActuAffichage(InfText1,InfText2,location);
				}else{
				alert("Aucune information retournée");
				}
			}else{
			alert("Geocodeur échec dû à: " + status);
			}
		})
	}
	//------------------------------------------------------------------------------------------------------------
	var elevator = new google.maps.ElevationService;
	//Lancer la requête pour recuperer l'altitude
	elevator.getElevationForLocations({'locations': [location]}, function(results, status)
	{
    if (status === google.maps.ElevationStatus.OK)
		{
		if (results[0]) //Récupérer le premier element
			{
			var Altitude = Math.round(results[0].elevation);
			InfText2 = "Altitude: " + Altitude + "M.<br> Latitude: " + Latitude + "°<br> Longitude: " + Longitude + "°";
			Altit = Altitude
			ActuAffichage(InfText1,InfText2,location);
			}else{
			alert("Aucune information retournée")
			}
		}else{
		alert("Echec dû à: " + status);
		}
	})
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function ActuAffichage(Data1,Data2,location)
{
	if ((typeof(Data1) != 'undefined') && (typeof(Data2) != 'undefined'))
		{
		var infowindow = new google.maps.InfoWindow({map: Carte});
		infowindow.setContent("<div style='background-color:lightblue'><p style='color:red'>" + Data1 + "</p></div>"
							+ Data2 + "<br>"
							+ "<input type='button' title='Valider pointage lieux 1' onclick='Affichage1()' value='Lieux 1'>"
							+ "<input type='button' title='Valider pointage lieux 2' onclick='Affichage2()' value='Lieux 2'>");
		infowindow.setPosition(location);
		OldInfWindow = infowindow;
		}
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function Affichage1()
{
	if (typeof(Adrs1) == 'undefined') return;
	if (typeof(MaLigne) != 'undefined') {MaLigne.setMap(null)};
	if (typeof(Marker1) != 'undefined') {Marker1.setMap(null)};
	if (typeof(OldInfWindow) != 'undefined') {OldInfWindow.close()};
 
	document.getElementById("adrss1").innerHTML = Adrs1 + ' Alt. ' + Altit + 'm';
	document.getElementById("lat1").innerHTML = Latit;
	document.getElementById("lon1").innerHTML = longi;
	marquer1();
	if (document.getElementById("adrss2").innerHTML != '' && Marker2.getMap() != null){calculer();}
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function marquer1()	// création du marker1
{    
	if (typeof(Marker1) != 'undefined') {Marker1.setMap(null)};
	Marker1 = new google.maps.Marker({
    'icon' : 'http://maps.google.com/mapfiles/kml/paddle/grn-blank.png', // affiche un marker vert
    'title' : document.getElementById("adrss1").innerHTML,
	'position' : new google.maps.LatLng(document.getElementById("lat1").innerHTML, document.getElementById("lon1").innerHTML),
    'map' : Carte                                                 // l'objet carte sur lequel est affiché le marker
	});
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function Affichage2()
{
	if (typeof(Adrs1) == 'undefined') return;
  	if (typeof(MaLigne) != 'undefined') {MaLigne.setMap(null)};
	if (typeof(Marker2) != 'undefined') {Marker2.setMap(null)};
	if (typeof(OldInfWindow) != 'undefined') {OldInfWindow.close()};
 
	document.getElementById("adrss2").innerHTML = Adrs1 + ' Alt. ' + Altit + 'm';
	document.getElementById("lat2").innerHTML = Latit;
	document.getElementById("lon2").innerHTML = longi;
	marquer2();
	if (document.getElementById("adrss1").innerHTML != '' && Marker1.getMap() != null){calculer();}
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function marquer2()	// création du marker2
{    
 	if (typeof(Marker2) != 'undefined') {Marker2.setMap(null)};
	Marker2 = new google.maps.Marker({
    'icon' : ' http://maps.google.com/mapfiles//kml/paddle/blu-blank.png', // affiche un marker bleu
    'title' : document.getElementById("adrss2").innerHTML,
    'position' : new google.maps.LatLng(document.getElementById("lat2").innerHTML, document.getElementById("lon2").innerHTML),
    'map' : Carte
	});
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function calculer()
{    
	if (document.getElementById("adrss1").innerHTML != '' && document.getElementById("adrss2").innerHTML != '')
		{
		var Den1 = document.getElementById("adrss1").innerHTML.split(" ");
		var Deniv1 = Den1[Den1.length - 1];
		Deniv1 = Number(Deniv1.replace("m",""));
 
		var Den2 = document.getElementById("adrss2").innerHTML.split(" ");
		var Deniv2 = Den2[Den2.length - 1];
		Deniv2 = Number(Deniv2.replace("m",""));
 
		var Deniv
		if (Deniv1 > Deniv2) {Deniv = Deniv1 - Deniv2;}else{Deniv = Deniv2 - Deniv1;}
		var point1 = new google.maps.LatLng(document.getElementById("lat1").innerHTML,
											document.getElementById("lon1").innerHTML);
		var point2 = new google.maps.LatLng(document.getElementById("lat2").innerHTML,
											document.getElementById("lon2").innerHTML);
		var distance = google.maps.geometry.spherical.computeDistanceBetween(point2,point1);
		var conversion = (distance/1000).toFixed(3);//Prendre trois chiffres après la virgule
		document.getElementById("egal1").innerHTML = 'Distance: ' + conversion + 'Km';
		document.getElementById("egal2").innerHTML = 'Dénivelé: ' + Deniv + 'm';
		if (Marker1.getMap() == null) {marquer1()};
		if (Marker2.getMap() == null) {marquer2()};
		creationligne();
		}
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function creationligne()// création de la ligne reliant le marker1 au marker2
{    
  	if (typeof(MaLigne) != 'undefined') {MaLigne.setMap(null)};
	var flightPlanCoordinates = [
		new google.maps.LatLng(document.getElementById("lat1").innerHTML, document.getElementById("lon1").innerHTML),
		new google.maps.LatLng(document.getElementById("lat2").innerHTML, document.getElementById("lon2").innerHTML)
        ];
	MaLigne = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });
	MaLigne.setMap(Carte);
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function effacer()
{    
	MaLigne.setMap(null);Marker1.setMap(null);Marker2.setMap(null);
}

L'optention de la distance est faite dans la fonction calculer() ligne 292 à 296.

Le fichier HTML

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<title>Google Map perso</title>
	<script src="MapGoogle.js"></script>
	</head> 
 
<style>
div.Bord {border: 1px solid #000000; font-size: 14px;}
 
div.BordA {border-radius: 3px 9px;}
 
p {margin-left: 5px;}
        
div.Pl {background-color:#FFDD91; color:#000095; border-radius: 2px 2px;}
    
div.L1 {background-color: #CEFF9C; color:#007800;}
   
div.L2 {background-color: #6ED5FF; color:#000000;}
 
div.Rs {background-color: #FFFF98; color:#000000;}
    
select.zoom {
    position: absolute;
        left:330px;
        top:2px;
        width:100px;
        height:20px;
}
::-webkit-input-placeholder {color: #0000FF;}
   
:-moz-placeholder {color: #0000FF; /* Firefox 18- */}
     
::-moz-placeholder {color: #0000FF;  /* Firefox 19+ */}
 
:-ms-input-placeholder {color: #0000FF;}  
 
div.macarte {
    position: relative;
    left: 0px;
        top: 78px;
        height: 630px;
        width: 99.8%;
    border: 1px solid #000000;
        background-color: lightblue;
}
</style>	
 
<body style="margin:2px; padding:3px; color:#000095">
 
	<h4 style="position:absolute; left:5px; top:-20px">Elévation et distance à vol d'oiseau avec Google Map</h4>
	<img src="Geoloc.gif" alt="Géolocaliser" title="Me géolocaliser" onclick="getLocation()" style="position:absolute; left:408px; top:7px; height:14px; width:28px">
	<div id="Pl" class="Pl Bord" style="position:absolute; top:28px; height:52px; width:436px">
		<input type="radio" id="typemapid1" name="typemapid" onclick="ChoixMap(this.value)" value="TERRAIN" checked>
		<label for="typemapid1">Terrain</label>
		<input type="radio" id="typemapid2" name="typemapid" onclick="ChoixMap(this.value)" value="ROADMAP">
		<label for="typemapid2">Carte routière</label>
		<input type="radio" id="typemapid3" name="typemapid" onclick="ChoixMap(this.value)" value="SATELLITE">
		<label for="typemapid3">Satellite</label>
		<input type="radio" id="typemapid4" name="typemapid" onclick="ChoixMap(this.value)" value="HYBRID">
		<label for="typemapid4">Normales</label>
		<input id="pacinput" onfocus="border-color:#4d90fe" style="position:absolute; left:5px; top:25px; width:420px" type="text"
        placeholder="Entrez un emplacement">
		<select id="zoom" class="zoom" onchange="zoomonchange()" onmouseup="zoomonmouseup(event)" Title="Zoom">
			<option value="2">Monde
			<option value="4">Continent
			<option value="6" selected >Pays
			<option value="8">Region 
			<option value="10">departement
			<option value="12">canton
			<option value="14">Ville
			<option value="17">Rue/Chemin
			<option value="21">Batiment
		</select>
	</div>
 
	<div id="Ll" class="L1 Bord BordA" style="position:absolute; left:446px; top:0px; height:80px; width:307px; color:#000000">
		<Legend style="margin-left:5px">Lieux 1:</Legend>
		<Legend id="adrss1" style="position:absolute; left:60px; top:0px; color:#006300"></Legend> <!-- L'ADRESSE ET L'ALTITUDE -->
		<p style="position:absolute; left:2px; top:28px">Latitude :</p>
			<p id="lat1" style="position:absolute; left:80px; top:28px"></p> <!-- LA LATITUDE -->
		<p style="position:absolute; left:2px; top:46px">Longitude:</p>
			<p id="lon1" style="position:absolute; left:80px; top:46px"></p> <!-- LA LONGITUDE -->
		<input type="button" title="Centrer sur lieux 1" style="position:absolute; right:4px; top:63px; height:15px; width:15px" onclick="Centrer1()" value="">
	</div>
 
	<div id="L2" class="L2 Bord BordA" style="position:absolute; left:755px; top:0px; height:80px; width:307px; color:#000000">
		<Legend style="margin-left:5px">Lieux 2:</Legend>
		<Legend id="adrss2" style="position:absolute; left:60px; top:0px; color:#0000BF"></Legend> <!-- L'ADRESSE ET L'ALTITUDE -->
		<p style="position:absolute; left:2px; top:28px">Latitude :</p>
			<p id="lat2" style="position:absolute; left:80px; top:28px"></p> <!-- LA LATITUDE -->
		<p style="position:absolute; left:2px; top:46px">Longitude:</p>
			<p id="lon2" style="position:absolute; left:80px; top:46px"></p> <!-- LA LONGITUDE -->
		<input type="button" title="Centrer sur lieux 2" style="position:absolute; right:4px; top:63px; height:15px; width:15px" onclick="Centrer2()" value="">
	</div>
 
	<div id="Rs" class="Rs Bord BordA" style="position:absolute; right:6px;top:0px; width:150px; height:80px">
		<Legend style="margin-left:5px">Résultat</Legend>
		<input type="button" title="Calculer/Restaurer" style="position:absolute; left:80px; top:2px; height:10px; width:65px" onclick="calculer()" value="">
		<p id="egal1" style="position:absolute; left:2px; top:8px; color:#000000"></p> <!-- Distance -->
		<p id="egal2" style="position:absolute; left:2px; top:26px; color:#000000"></p> <!-- Dénivelé -->
		<input type="button" title="Effacer" style="position:absolute; left:15px; top:57px; height:22px; width:120px" onclick="effacer()" value="Effacer">
	</div>
 
	<div id="macarte" class="macarte"></div>
	<script>loadon();resizeon();</script>
	<script src="https://maps.googleapis.com/maps/api/js?key=MACLEFAPIGOOGLE&libraries=geometry,places&callback=initMap"></script>
 
</body>
</html>

Pensé à modifier la ligne 108, remplacer MACLEFAPIGOOGLE par VOTRECLEFAPIGOOGLE
L'image Géolocalisation, ligne 53, à mettre dans le même dossier:

**Souleyre** · 21/11/2017, 11h03

Merci ProgElecT.
C'est exactement ce que je recherchais.
Et ce n'est pas la première fois que tu me dépannes...
Encore merci et bravo.
PS: il me subsiste un dernier petit problème: est-il possible d'utiliser ta routine sans clef API?

**ProgElecT** · 21/11/2017, 12h02

Envoyé par Souleyre

Merci ProgElecT
.......
est-il possible d'utiliser ta routine sans clef API?

Non, l'inscription est gratuite pour un certain nombre de requête.
Ce code est ma première expérience en javascript (printemps 2017), il n'est surement pas des mieux écrit, mais il fonctionne

**ironside07** · 08/04/2018, 21h41

je suis débutant en javascript (et en programmation en générale ) , est ce que tu peux m aider pour fixer le premier lieu ( toujours le même ) ??
merci d'avance

**ProgElecT** · 13/04/2018, 16h03

Salut

Désolé ironside07, j'avais oublié ta demande.
Cela se passe dans le fichier MapGoogle.js, il faut remplacer la fonction initMap()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
function initMap()
{
    var mapCanvas;
	mapCanvas = document.getElementById("macarte");
	//46.66451741754235,6.6066035 magland         48.471110997291696,1.501031219959259 CHAMPHOL          48.0228868,2.724609375 centre france
	var positionDebut = new google.maps.LatLng(48.0228868,2.724609375);// premier positionnement (centrage de la carte)
	var mapOptions = 
		{center: positionDebut,
		//disableDefaultUI: true, // cacher ou non tous les controles
		mapTypeControl: false, // cacher ou non le choix des terrains
		zoomControl: false,	 // cacher ou non le zoom
		fullscreenControl: true, // cacher ou non le plein écran
		//streetViewControl: false, // cacher ou non le parcour filmé
		zoom: 6,
		mapTypeId: google.maps.MapTypeId.TERRAIN}; 
	Carte = new google.maps.Map(mapCanvas,mapOptions);
 
// ------------------------------------- pose d'un marqueur à la création  -------------------------------------------------
	//création du marqueur à l'endroit positionDebut
	//var marqueur = new google.maps.Marker({
	//	'icon' : 'http://maps.google.com/mapfiles/kml/paddle/grn-blank.png', // affiche un marker vert
	//	position: positionDebut,
	//	map: Carte
	//});
// ---------------------------------- Fin pose d'un marqueur à la création  -------------------------------------------------
//                                                   OU
// -----------------------  simulation du declenchement d'un clique sur la carte  -------------------------------------------
	displayLocationElevation(positionDebut,'');// ouverture de la boîte confirmation de positionnement
// ---------------------  Fin simulation du declenchement d'un clique sur la carte  -----------------------------------------
 
	//Ajouter un écouteur pour l'événement click sur la carte, pour affichage de l'adresse, l'altitude, la latitude et la longitude.
	Carte.addListener('click', function(event){if( !event.placeId){displayLocationElevation(event.latLng,'')}})  
 
	var input = document.getElementById('pacinput');
	var autocomplete = new google.maps.places.Autocomplete(input);
	autocomplete.bindTo('bounds', Carte);
	autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();
	if (!place.geometry)
	{
		return; // proposition d'un lieu non valide quitte la procedure
    }
    if (place.geometry.viewport)
		{
		} else {
		map.setCenter(place.geometry.location); 
		map.setZoom(14);
		document.getElementById('zoom').selectedIndex = 6;
		}
	displayLocationElevation(place.geometry.location,place.formatted_address);
  });
}

Modifications/ajouts:
lignes 6 et 8 ( positionDebut ) et ligne 20 à 24 ou mieux de mon avis la ligne 28.

**ironside07** · 27/04/2018, 08h36

merci , j'ai résolu ce problème avec votre aide . ProgElecT je vous dérange encore une fois . je veux créer un bouton qui va rediriger vers une autre page après faire une vérification sur la distance si elle dépasse 2km sinon affiche une alerte . j'ai fait des essais mais toujours la carte ne s' affiche pas.
aider -moi svp et merci d avance .

**ProgElecT** · 27/04/2018, 18h35

Salut

Envoyé par ironside07

merci ........
1- Je veux créer un bouton qui va rediriger vers une autre page
2- et après faire une vérification sur la distance si elle dépasse 2km sinon affiche une alerte
.....

1- vers une autre page

, tu veux dire une autre point de la carte?
2- dépasse 2 km par apport à quoi?

**ironside07** · 27/04/2018, 23h16

salut ,je veux créer un bouton valider qui me redirige vers un autre interface web ( facile je peut le faire ) si la distance entre les deux lieux choisis ne dépasse 2 km (mais cette vérification j ai trouvé plusieurs problèmes) et merci .

**ProgElecT** · 28/04/2018, 08h19

Salut

Envoyé par 1er message

.....
tout comme dans cette discussion : Calcul distance google maps
.....

Envoyé par ironside07

mais cette vérification j ai trouvé plusieurs problèmes

Lesquels, montre nous tes essais (code) on pourra surement te venir en aide.

**ProgElecT** · 28/04/2018, 09h33

Un exemple simple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Distance entre 2 points</title>
	</head> 
<script>
function calculer()
{
        let data = document.getElementById("Dep").value;
        let Arr = data.split(",");
        let LatLngDep = new google.maps.LatLng(Arr[0],Arr[1]);
 
        data = document.getElementById("Arv").value;
        Arr = data.split(",");
        let LatLngArv = new google.maps.LatLng(Arr[0],Arr[1]);
 
        let distance = google.maps.geometry.spherical.computeDistanceBetween(LatLngDep, LatLngArv);
        console.log(distance);
        if (distance < 2000)
        {
                alert('distance = ' + distance + ' donc moins de 2Km, on peut passer à la page suivante');
                }else{
                alert('distance = ' + distance + ' donc plus de 2Km, de fait on reste sur la même  page');
        }
}
        </script>
 
<body>
	<input id="Dep" type="text" style="width:250px;" value="46.02180750544398,6.620808480309961">
	<input id="Arv" type="text" style="width:250px;" value="46.04738520583925,6.5997730340034195">
	<!-- <input id="Arv" type="text" style="width:250px;" value="46.0219751287901,6.618791459130762"> -->
	<input type="button" onclick="calculer()" value="Go">
 
	<script src="https://maps.googleapis.com/maps/api/js?key=MACLEFAPIGOOGLE&libraries=geometry"></script>
	</script>
</body>
</html>

Pensé à modifier la ligne 35, remplacer MACLEFAPIGOOGLE par VOTRECLEFAPIGOOGLE

**ProgElecT** · 28/04/2018, 21h56

Salut

Dernière mouture, dernier post

.
Ces codes sont fait pour fonctionner en locale.

Essais sous
FireFox 58.0.2, Opera 51.0 et Chrome 64.0.3282.167 OK

Safari 5.1.7, Internet Explorer 11, Edge 16.16299 KO

La première page MapGoogleAutre.html, dé-commenter à tour de rôle les lignes 37 et 38 pour faire fonctionner le code, sinon, entrez directement des latitudes et longitudes dans les boîtes texte de la page.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Google Map autre</title>
	</head> 
<script>
function calculer()
{
        let data = document.getElementById("Dep").value;
        let Arr = data.split(",");
        let LatLngDep = new google.maps.LatLng(Arr[0],Arr[1]);
 
        data = document.getElementById("Arv").value;
        Arr = data.split(",");
        let LatLngArv = new google.maps.LatLng(Arr[0],Arr[1]);
        // calcul de la distance avec l'API Google
        let distance = google.maps.geometry.spherical.computeDistanceBetween(LatLngDep, LatLngArv);
        if (distance < 2000)
        {
                //confirmation de moins de 2km
                alert('distance = ' + distance + ' donc moins de 2Km, on peut passer à la page suivante');
                // création des cookies pour pouvoir  être reccuperé par la page suivante MapGoogleSortie.html
                localStorage.setItem('LatLngDep', LatLngDep);
                localStorage.setItem('LatLngArv', LatLngArv);
                localStorage.setItem('Distance', distance);
                return true;//autorise le passage à la page suivante
                }else{
                alert('distance = ' + distance + ' donc plus de 2Km, de fait on reste sur la même  page');
                return false;//bloque le passage à la page suivante reste sur la même page
        }
}
        </script>
 
<body>
		<form action="MapGoogleSortie.html" onsubmit="return calculer()">
				<input id="Dep" type="text" style="width:250px;" value="46.02180750544398,6.620808480309961">
				<!-- <input id="Arv" type="text" style="width:250px;" value="46.04738520583925,6.5997730340034195"> -->
				<input id="Arv" type="text" style="width:250px;" value="46.0219751287901,6.618791459130762">
				<input type="submit" value="Go">
				<script src="https://maps.googleapis.com/maps/api/js?key=MACLEFAPIGOOGLE&libraries=geometry"></script>
		</form>
 
	</body>
</html>

La page suivante MapGoogleSortie.html, si la distance remplie les conditions (moins ou égal 2 Km), dessine les marqueurs et la ligne les reliant.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Google Map sorie</title>
		<style>
                        div.macarte {
                                position: relative;
                                left: 0px;
                                top: 25px;
                                height: 600px;
                                width: 99.8%;
                                border: 1px solid #000000;
                                background-color: lightblue;
                        }
                </style>
	</head> 
	<script>
        function initMap()
        {
                let mapCanvas;
                mapCanvas = document.getElementById("macarte");
                //48.0228868,2.724609375 centre france
                let mapOptions = 
                        {center: new google.maps.LatLng(48.0228868,2.724609375),
                        //disableDefaultUI: true, // cacher ou non tous les controles
                        mapTypeControl: false, // cacher ou non le choix des terrains
                        zoomControl: false,      // cacher ou non le zoom
                        fullscreenControl: true, // cacher ou non le plein écran
                        //streetViewControl: false, // cacher ou non le parcour filmé
                        zoom: 6,
                        mapTypeId: google.maps.MapTypeId.TERRAIN}; 
                let Carte = new google.maps.Map(mapCanvas,mapOptions);
                //recuperation et affichage de la distance calculé dans la page précédante MapGoogleAutre.html
        document.getElementById("Distance").innerHTML = localStorage.getItem('Distance');
                //recuperation des latitudes et longitudes du premier point de coordonnées provenant de la page précédante MapGoogleAutre.html
                let LatLngDep = localStorage.getItem('LatLngDep');
        
                let data = LatLngDep;
                let Dep = data.split(",");
                Dep[0] = Dep[0].replace("(","");
                Dep[1] = Dep[1].replace(")","");
        
                let Marker1 = new google.maps.Marker({
                        'icon' : 'http://maps.google.com/mapfiles/kml/paddle/grn-blank.png', // affiche un marker vert
                        'title' : 'Coordonée 1',
                        'position' : new google.maps.LatLng(Dep[0],Dep[1]),
                        'map' : Carte                                                 // l'objet carte sur lequel est affiché le marker
                });
 
                //recuperation des latitudes et longitudes du deuxieme point de coordonnées provenant de la page précédante MapGoogleAutre.html
                let LatLngArv = localStorage.getItem('LatLngArv');
                data = LatLngArv;
                let Arr = data.split(",");
                Arr[0] = Arr[0].replace("(","");
                Arr[1] = Arr[1].replace(")","");
        
                let Marker2 = new google.maps.Marker({
                        'icon' : 'http://maps.google.com/mapfiles//kml/paddle/blu-blank.png', // affiche un marker bleu
                        'title' : 'Coordonée 2',
                        'position' : new google.maps.LatLng(Arr[0],Arr[1]),
                        'map' : Carte                                                 // l'objet carte sur lequel est affiché le marker
                });
 
                //Marker1 et Marker2
                // ******** centrage et adaptation du zoom pour rendre visibles les marqueurs **********
                let RectangleMarkers = new google.maps.LatLngBounds();
                RectangleMarkers.extend( Marker1.getPosition() );
                RectangleMarkers.extend( Marker2.getPosition() );
                Carte.fitBounds( RectangleMarkers );
 
                //centrage de la carte par apport aux 2 marqueurs avec adaptation du zoom
                let flightPlanCoordinates = [
                new google.maps.LatLng(Dep[0],Dep[1]),
                new google.maps.LatLng(Arr[0],Arr[1])
        ];
 
                //configuration de la ligne
                let MaLigne = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
                  strokeWeight: 2
        });
                //traçage de la ligne
                MaLigne.setMap(Carte);
        }
        </script>
 
	<body>
		<h3 id="Distance"></h3>
		<div id="macarte" class="macarte"></div>
		<script src="https://maps.googleapis.com/maps/api/js?key=MACLEFAPIGOOGLE&callback=initMap"></script>
	</body>
</html>

Pensé à modifier les lignes 41 et 94, remplacer MACLEFAPIGOOGLE par VOTRECLEFAPIGOOGLE

**ironside07** · 30/04/2018, 18h32

merci pour votre aide , mais je veux cette solution sur le premier exemple ( la première carte dans la discussion )

**ProgElecT** · 01/05/2018, 11h23

salut

Donc on reprend.

Utiliser le code HTML du post 8, supprimer la ligne 100

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" title="Calculer/Restaurer" style="position:absolute; left:80px; top:2px; height:10px; width:65px" onclick="calculer()" value="">

Le nouveau code JavaScript qui va faire fonctionner cette page HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
	"use strict"; // force la déclaration des variables
	var Carte, OldInfWindow, Adrs1, Latit, longi, Altit, Marker1, Marker2, MaLigne, dispo, lftl1, optionsCercle;
	window.onresize = resizeon;
	window.onload = loadon;
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function loadon()
{
	dispo = extrat(document.getElementById("Pl").style.left) + 
			 extrat(document.getElementById("Pl").style.width) +
			 extrat(document.getElementById("Rs").style.right) + 
			 extrat(document.getElementById("Rs").style.width) + 24;
	//document.getElementById("result").innerHTML = dispo;
	lftl1 = extrat(document.getElementById("Ll").style.left);
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function extrat(don)
{
	var valeur = String(don);
	valeur = valeur.replace('px', '');
	valeur = (valeur * 1);  // *1 convertie en Number
	return valeur;
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function resizeon()
{
	var htf = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	htf = htf - 105;
	document.getElementById("macarte").style.height = htf +'px';
	var wf = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
	if (wf >= 1240) {
		var reste = (wf - dispo) / 2;
		reste =  reste.toFixed(0);
		var lftl2 = Number(lftl1) + Number(reste) + Number("6"); 
		document.getElementById("Ll").style.width = reste + 'px';
		document.getElementById("L2").style.left = lftl2 + 'px';
		document.getElementById("L2").style.width = reste + 'px';
	}
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function ChoixMap(value)
{
	switch (value) 
	{
    case 'TERRAIN':
		Carte.setMapTypeId(google.maps.MapTypeId.TERRAIN);
        break;
    case 'ROADMAP':
		Carte.setMapTypeId(google.maps.MapTypeId.ROADMAP);
        break;
    case 'SATELLITE':
		Carte.setMapTypeId(google.maps.MapTypeId.SATELLITE);
        break;
    case 'HYBRID':
		Carte.setMapTypeId(google.maps.MapTypeId.HYBRID);
	}
}	
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function zoomonchange()
{
Carte.setZoom(Number(document.getElementById("zoom").value));
}	
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function zoomonmouseup(event)
{
	var x = event.which || event.keyCode;
	var y = Number(document.getElementById("zoom").value);
	var z = Carte.getZoom();
	if ((x == 2) && (y != z)){Carte.setZoom(y)}; //bouton central de la souris
}	
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function initMap()
{
    var mapCanvas;
	mapCanvas = document.getElementById("macarte");
	//46.66451741754235,6.6066035 magland         48.471110997291696,1.501031219959259 CHAMPHOL          48.0228868,2.724609375 centre france
	var mapOptions = 
		{center: new google.maps.LatLng(48.0228868,2.724609375),
		//disableDefaultUI: true, // cacher ou non tous les controles
		mapTypeControl: false, // cacher ou non le choix des terrains
		zoomControl: false,	 // cacher ou non le zoom
		fullscreenControl: true, // cacher ou non le plein écran
		//streetViewControl: false, // cacher ou non le parcour filmé
		zoom: 6,
		mapTypeId: google.maps.MapTypeId.TERRAIN}; 
	Carte = new google.maps.Map(mapCanvas,mapOptions);
	//Ajouter un écouteur pour l'événement click sur la carte, pour affichage de l'adresse, l'altitude, la latitude et la longitude.
	Carte.addListener('click', function(event){if( !event.placeId){displayLocationElevation(event.latLng,'')}})  
 
	var input = document.getElementById('pacinput');
	var autocomplete = new google.maps.places.Autocomplete(input);
	autocomplete.bindTo('bounds', Carte);
	autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();
	if (!place.geometry)
	{
		return; // proposition d'un lieu non valide quitte la procedure
    }
    if (place.geometry.viewport)
		{
		} else {
		map.setCenter(place.geometry.location); 
		map.setZoom(14);
		document.getElementById('zoom').selectedIndex = 6;
		}
	displayLocationElevation(place.geometry.location,place.formatted_address);
  });
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function getLocation(){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else { 
        alert('Geolocation non supprotée par votre navigateur.');
    }
}		//---------------------------------------------------------
function showPosition(position){
	Carte.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
	Carte.setZoom(12)
	document.getElementById('zoom').selectedIndex = 5;
}		//---------------------------------------------------------
function showError(error) {
    switch(error.code){
        case error.PERMISSION_DENIED:
            alert('Utilisateur a rejeté la demande de géolocalisation.');
            break;
        case error.POSITION_UNAVAILABLE:
            alert('Informations sur la localisation ne sont pas disponibles.');
            break;
        case error.TIMEOUT:
            alert('La demande pour obtenir l’emplacement de l’utilisateur a expiré.');
            break;
        case error.UNKNOWN_ERROR:
            alert('Une erreur inconnue s’est produite.');
            break;
    }
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function Centrer1()
{
	if (document.getElementById("adrss1").innerHTML == '' ) return;
	Carte.setCenter(new google.maps.LatLng(document.getElementById("lat1").innerHTML,document.getElementById("lon1").innerHTML));
	//Carte.setZoom(11)
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function Centrer2()
{
	if (document.getElementById("adrss2").innerHTML == '' ) return;
	Carte.setCenter(new google.maps.LatLng(document.getElementById("lat2").innerHTML,document.getElementById("lon2").innerHTML));
	//Carte.setZoom(11)
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function displayLocationElevation(location,NamePlace)
{
	if (typeof(OldInfWindow) != 'undefined') OldInfWindow.close();// permet de fermer l'infos que j'ai instancié precedement
	var MyArr =  String(location);
	var CvString = MyArr.replace("(",""); CvString = CvString.replace(")","");
	var Tbl = CvString.split(",");
	var latlng = {lat: parseFloat(Tbl[0]), lng: parseFloat(Tbl[1])};
	var Latitude = Math.round(Tbl[0]*100)/100;
		Latit = Tbl[0];
	var Longitude = Math.round(Tbl[1]*100)/100;
		longi = Tbl[1];
	var InfText1, InfText2;
	//------------------------------------------------------------------------------------------------------------
	if (NamePlace != '')
		{
		InfText1 = NamePlace;
		Adrs1 = InfText1;
		ActuAffichage(InfText1,InfText2,location);
		}else{
		var geocoder = new google.maps.Geocoder;
		//Lancer la requête pour recuperer l'adresse (code postal,commune et pays)
		geocoder.geocode({'location': latlng}, function(results, status)
		{
		if (status === google.maps.GeocoderStatus.OK)
			{
			if (results[1]) //Récupérer le deuxieme element 
				{
				CvString = results[1].formatted_address;
				InfText1 = CvString.replace("Unnamed Road,", " ");
				Adrs1 = InfText1;
				ActuAffichage(InfText1,InfText2,location);
				}else{
				alert("Aucune information retournée");
				}
			}else{
			alert("Geocodeur échec dû à: " + status);
			}
		})
	}
	//------------------------------------------------------------------------------------------------------------
	var elevator = new google.maps.ElevationService;
	//Lancer la requête pour recuperer l'altitude
	elevator.getElevationForLocations({'locations': [location]}, function(results, status)
	{
    if (status === google.maps.ElevationStatus.OK)
		{
		if (results[0]) //Récupérer le premier element
			{
			var Altitude = Math.round(results[0].elevation);
			InfText2 = "Altitude: " + Altitude + "M.<br> Latitude: " + Latitude + "°<br> Longitude: " + Longitude + "°";
			Altit = Altitude
			ActuAffichage(InfText1,InfText2,location);
			}else{
			alert("Aucune information retournée")
			}
		}else{
		alert("Echec dû à: " + status);
		}
	})
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function ActuAffichage(Data1,Data2,location)
{
	if ((typeof(Data1) != 'undefined') && (typeof(Data2) != 'undefined'))
	{
		var infowindow = new google.maps.InfoWindow({map: Carte});
		if (document.getElementById("adrss1").innerHTML == '')
		{
			infowindow.setContent("<div style='background-color:lightblue'><p style='color:red'>" + Data1 + "</p></div>"
							+ Data2 + "<br>"
							+ "<input type='button' title='Valider pointage lieux 1' onclick='Affichage1()' value='Lieux 1'>");
			}
		else
		{
			infowindow.setContent("<div style='background-color:lightblue'><p style='color:red'>" + Data1 + "</p></div>"
							+ Data2 + "<br>"
							+ "<input type='button' title='Valider pointage lieux 2' onclick='Affichage2()' value='Lieux 2'>");
		}
		infowindow.setPosition(location);
		OldInfWindow = infowindow;
	}
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function Affichage1()
{
	if (typeof(Adrs1) == 'undefined') return;
	if (typeof(MaLigne) != 'undefined') {MaLigne.setMap(null)};
	if (typeof(Marker1) != 'undefined') {Marker1.setMap(null)};
	if (typeof(OldInfWindow) != 'undefined') {OldInfWindow.close()};
 
	document.getElementById("adrss1").innerHTML = Adrs1 + ' Alt. ' + Altit + 'm';
	document.getElementById("lat1").innerHTML = Latit;
	document.getElementById("lon1").innerHTML = longi;
	marquer1();
 
	if (document.getElementById("adrss2").innerHTML != '' && Marker2.getMap() != null){calculer();}
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function marquer1()	// création du marker1
{    
	if (typeof(Marker1) != 'undefined') {Marker1.setMap(null)};
	Marker1 = new google.maps.Marker({
    'icon' : 'http://maps.google.com/mapfiles/kml/paddle/grn-blank.png', // affiche un marker vert
    'title' : document.getElementById("adrss1").innerHTML,
	'position' : new google.maps.LatLng(document.getElementById("lat1").innerHTML, document.getElementById("lon1").innerHTML),
    'map' : Carte                                                 // l'objet carte sur lequel est affiché le marker
	});
	let CentreCercle = new google.maps.LatLng(document.getElementById("lat1").innerHTML, document.getElementById("lon1").innerHTML);
	if (typeof(optionsCercle) != 'undefined') {optionsCercle.setMap(null)};
	optionsCercle = new google.maps.Circle({
		map: Carte,
		center: CentreCercle,
		radius: 2000,
		strokeColor: "#0000FF",
		strokeOpacity: 1,
		strokeWeight: 1,
		fillColor: "#0000FF",
		fillOpacity: 0.05
	});
	optionsCercle.setMap(Carte);
	optionsCercle.addListener('click', function(event){if( !event.placeId){displayLocationElevation(event.latLng,'')}})  
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function Affichage2()
{
	if (typeof(Adrs1) == 'undefined') return;
  	if (typeof(MaLigne) != 'undefined') {MaLigne.setMap(null)};
	if (typeof(Marker2) != 'undefined') {Marker2.setMap(null)};
	if (typeof(OldInfWindow) != 'undefined') {OldInfWindow.close()};
 
	document.getElementById("adrss2").innerHTML = Adrs1 + ' Alt. ' + Altit + 'm';
	document.getElementById("lat2").innerHTML = Latit;
	document.getElementById("lon2").innerHTML = longi;
	marquer2();
	if (document.getElementById("adrss1").innerHTML != '' && Marker1.getMap() != null){calculer();}
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function marquer2()	// création du marker2
{    
 	if (typeof(Marker2) != 'undefined') {Marker2.setMap(null)};
	Marker2 = new google.maps.Marker({
    'icon' : ' http://maps.google.com/mapfiles//kml/paddle/blu-blank.png', // affiche un marker bleu
    'title' : document.getElementById("adrss2").innerHTML,
    'position' : new google.maps.LatLng(document.getElementById("lat2").innerHTML, document.getElementById("lon2").innerHTML),
    'map' : Carte
	});
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function calculer()
{    
	if (document.getElementById("adrss1").innerHTML != '' && document.getElementById("adrss2").innerHTML != '')
		{
		var Den1 = document.getElementById("adrss1").innerHTML.split(" ");
		var Deniv1 = Den1[Den1.length - 1];
		Deniv1 = Number(Deniv1.replace("m",""));
 
		var Den2 = document.getElementById("adrss2").innerHTML.split(" ");
		var Deniv2 = Den2[Den2.length - 1];
		Deniv2 = Number(Deniv2.replace("m",""));
 
		var Deniv
		if (Deniv1 > Deniv2) {Deniv = Deniv1 - Deniv2;}else{Deniv = Deniv2 - Deniv1;}
		var point1 = new google.maps.LatLng(document.getElementById("lat1").innerHTML,
											document.getElementById("lon1").innerHTML);
		var point2 = new google.maps.LatLng(document.getElementById("lat2").innerHTML,
											document.getElementById("lon2").innerHTML);
		//var distance = google.maps.geometry.spherical.computeDistanceBetween(point1,point2);
		var distance = google.maps.geometry.spherical.computeDistanceBetween(point2,point1);
		var conversion = (distance/1000).toFixed(3);//Prendre trois chiffres après la virgule
		document.getElementById("egal1").innerHTML = 'Distance: ' + conversion + 'Km';
		document.getElementById("egal2").innerHTML = 'Dénivelé: ' + Deniv + 'm';
		if (Marker1.getMap() == null) {marquer1()};
		if (Marker2.getMap() == null) {marquer2()};
		creationligne();
		}
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function creationligne()// création de la ligne reliant le marker1 au marker2
{    
  	if (typeof(MaLigne) != 'undefined') {MaLigne.setMap(null)};
	var flightPlanCoordinates = [
		new google.maps.LatLng(document.getElementById("lat1").innerHTML, document.getElementById("lon1").innerHTML),
		new google.maps.LatLng(document.getElementById("lat2").innerHTML, document.getElementById("lon2").innerHTML)
        ];
	MaLigne = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });
	MaLigne.setMap(Carte);
}
//*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*
function effacer()
{    
	if (typeof(Marker1) != 'undefined') {Marker1.setMap(null)};
	if (typeof(optionsCercle) != 'undefined') {optionsCercle.setMap(null)};
	if (typeof(Marker2) != 'undefined') {Marker2.setMap(null)};
	if (typeof(MaLigne) != 'undefined') {MaLigne.setMap(null)};
	document.getElementById("adrss1").innerHTML = '';
	document.getElementById("lat1").innerHTML ='';
	document.getElementById("lon1").innerHTML = '';
	document.getElementById("adrss2").innerHTML = '';
	document.getElementById("lat2").innerHTML ='';
	document.getElementById("lon2").innerHTML = '';
	document.getElementById("egal1").innerHTML = 'Distance: ';
	document.getElementById("egal2").innerHTML = 'Dénivelé: ';
}

Lors du premier clique sur la carte, si vous valider, un marqueur et un cercle semi transparent est dessiner ayant pour centre les coordonnés du clique et un rayon de 2 km, voir ligne 259 à 272 du code javascript, la ligne 264 définie le rayon du cercle exprimée en mètre (soit 2000 pour 2km).

Les limites du cercle permetent de guider pour le deuxième clique, si il y a validation, un deuxième est dessiné, la distance et visualisé dans le cartouche jaune de droite.
Il est possible de cliquer plusieurs fois pour affiner la position du deuxième marqueur.
Pour reprendre le positionnement du premier marqueur, il faut effacer les indicateur (bouton Effacer cartouche jaune)

A tous moments, il est possible de centrer (cartouche vert lieux 1 bouton bas à droite, ou, cartouche bleu lieux 2 bouton bas à droite), zoomer, choisir le type de rendu carte .......

2 captures d'écran d'un aperçu impression en paysage:

Hors limite 2 Km (2.211 Km)

Nom : Previsu1.jpg
Affichages : 6033
Taille : 217,9 Ko