Incompatibilité entre deux fonctions google maps

**oscaro19** · 07/04/2014, 16h40

Bonjour à tous!

Je suis en train de créer un formulaire avec saisi automatique d'adresse (deux adresses), puis un calculateur de distance (en passant par un itinéraire google maps).

J'ai réussi à installer les 2 et à les faire fonctionner, mais lorsque je "fusionne" les deux, j'ai un problème : Les deux javascripts sont incompatibles et aucun des deux ne marche lorsqu'ils sont sur la meme page.... des idées SVP??

Voici les 2 plugins utilisés:

Code :

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

1
2
3
4
 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> 
 
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA09qY5o0F96_hLg4YyfFG3xRoIzq7W9kjqpTzBbn7O9wu0Oc8uhR44zTSflabpsk8CmRkpT3W0E7hSA"></script>

Merci!!

**NoSmoking** · 07/04/2014, 16h55

Bonjour et bienvenue sur DVP.

Mais pourquoi diable vouloir utiliser les 2 versions, une seule ne te suffit pas?

**oscaro19** · 07/04/2014, 17h04

Merci pour ton message de bienvenue nosmoking.

J'ai essayer d'en utiliser qu'une, mais ca ne marche plus...

J'ai utiliser des scripts trouvés dans des forums puis je les ai ré-arranger à mon gout.

VOici mon code :

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
// remplissage auto
 
var placeSearch, autocomplete1, autocomplete2;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};
 
function aidesaisi1() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete1 = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('autocomplete1')),
      { types: ['geocode'] });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete1, 'place_changed', function() {
    fillInAddress();
  });
}
 
function aidesaisi2() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete2 = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('autocomplete2')),
      { types: ['geocode'] });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete2, 'place_changed', function() {
    fillInAddress();
  });
}
 
function total(){
	aidesaisi1();
	aidesaisi2();
}

Qui utilise donc la source : "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"

et l'autre code (pou le calcul de distance):

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
 
 
//calcul de distance
 
var geocoder, location1, location2, gDir;
var sec=0;
 
function initialize() {
		geocoder = new GClientGeocoder();
		gDir = new GDirections();
		GEvent.addListener(gDir, "load", function() {
			var drivingDistanceMiles = gDir.getDistance().meters / 1609.344;
			var drivingDistanceKilometers = gDir.getDistance().meters / 1000;	
			var metric=document.forms[0].metric.value;
		<!--	var heure=document.form[0].time.GetHours();
		<!--	var multiplicateur = 3
		<!--	if( (heure>20) || (heure<7)) {
		<!--		multiplicateur = 3,5
		<!--	}
 
			document.form1.price.value=parseInt(drivingDistanceKilometers * 3);
			document.form1.metricused.value=metric;
					if (metric=="Kilometers"){
					document.form1.metricvalue.value=parseInt(drivingDistanceKilometers);
				} else {
					document.form1.metricvalue.value=parseInt(drivingDistanceMiles);
				}
			document.getElementById('results').innerHTML = 'Départ : ' + location1.address + '<br />Arrivée : ' + location2.address + '<br />&nbsp;';
			clearInterval(interv);
			document.getElementsByTagName('body')[0].style.cursor = 'default';
		});
	}
 
	function incremente() {
		if (sec<10)
		{
			sec++
		}
		else
		{
			alert("Désolés, nous ne parvenons pas à calculer la distance");
			clearInterval(interv);
			document.getElementsByTagName('body')[0].style.cursor = 'default';
			sec=0;
			document.getElementById('results').innerHTML = '';
			document.form1.distance.value='';
		}
	}
 
	function showLocation() {
		interv=setInterval("incremente()",1000);
		document.getElementsByTagName('body')[0].style.cursor = 'wait';
		var depart=document.forms[0].adresse_dep.value;
		var arrivee=document.forms[0].adresse_arr.value;
		geocoder.getLocations(depart, function (response) {
 
			if (!response || response.Status.code != 200)
			{
				alert("Désolés, nous ne parvenons pas à localiser l'adresse de départ");
                                clearInterval(interv);
				document.getElementsByTagName('body')[0].style.cursor = 'default';
			}
			else
			{
				location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
				geocoder.getLocations(arrivee, function (response) {
					if (!response || response.Status.code != 200)
					{
						alert("Désolés, nous ne parvenons pas à localiser l'adresse d'arrivée");
                                                clearInterval(interv);
				                document.getElementsByTagName('body')[0].style.cursor = 'default';
					}
					else
					{
						location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
						gDir.load('from: ' + location1.address + ' to: ' + location2.address) ;
					}
				});
			}
		});
	}
 
 
function initialize() {
		geocoder = new GClientGeocoder();
		gDir = new GDirections();
		GEvent.addListener(gDir, "load", function() {
			var drivingDistanceMiles = gDir.getDistance().meters / 1609.344;
			var drivingDistanceKilometers = gDir.getDistance().meters / 1000;	
			var metric=document.forms[0].metric.value;
		<!--	var heure=document.form[0].time.GetHours();
		<!--	var multiplicateur = 3
		<!--	if( (heure>20) || (heure<7)) {
		<!--		multiplicateur = 3,5
		<!--	}
 
			document.form1.price.value=parseInt(drivingDistanceKilometers * 3);
			document.form1.metricused.value=metric;
					if (metric=="Kilometers"){
					document.form1.metricvalue.value=parseInt(drivingDistanceKilometers);
				} else {
					document.form1.metricvalue.value=parseInt(drivingDistanceMiles);
				}
			document.getElementById('results').innerHTML = 'Départ : ' + location1.address + '<br />Arrivée : ' + location2.address + '<br />&nbsp;';
			clearInterval(interv);
			document.getElementsByTagName('body')[0].style.cursor = 'default';
		});
	}
 
	function incremente() {
		if (sec<10)
		{
			sec++
		}
		else
		{
			alert("Désolés, nous ne parvenons pas à calculer la distance");
			clearInterval(interv);
			document.getElementsByTagName('body')[0].style.cursor = 'default';
			sec=0;
			document.getElementById('results').innerHTML = '';
			document.form1.distance.value='';
		}
	}
 
	function showLocation() {
		interv=setInterval("incremente()",1000);
		document.getElementsByTagName('body')[0].style.cursor = 'wait';
		var depart=document.forms[0].adresse_dep.value;
		var arrivee=document.forms[0].adresse_arr.value;
		geocoder.getLocations(depart, function (response) {
 
			if (!response || response.Status.code != 200)
			{
				alert("Désolés, nous ne parvenons pas à localiser l'adresse de départ");
                                clearInterval(interv);
				document.getElementsByTagName('body')[0].style.cursor = 'default';
			}
			else
			{
				location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
				geocoder.getLocations(arrivee, function (response) {
					if (!response || response.Status.code != 200)
					{
						alert("Désolés, nous ne parvenons pas à localiser l'adresse d'arrivée");
                                                clearInterval(interv);
				                document.getElementsByTagName('body')[0].style.cursor = 'default';
					}
					else
					{
						location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
						gDir.load('from: ' + location1.address + ' to: ' + location2.address) ;
					}
				});
			}
		});
	}

avec la source : "http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA09qY5o0F96_hLg4YyfFG3xRoIzq7W9kjqpTzBbn7O9wu0Oc8uhR44zTSflabpsk8CmRkpT3W0E7hSA"

j'attend avec impatiente votre réponse car j'ai passer de très longues heures à tout retourner sans réussite...

**NoSmoking** · 07/04/2014, 19h04

concernant la 2^éme partie de ton code tu as toutes les fonctions qu'il te faut dans la version3, par exemple Directions Service

[EDIT]
dans ton code il convient d'utiliser exclusivement la mise en commentaire javascript, ce qui suit n'est pas valide et générera des erreurs

Code :

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

1
2
3
4
5
		<!--	var heure=document.form[0].time.GetHours();
		<!--	var multiplicateur = 3
		<!--	if( (heure>20) || (heure<7)) {
		<!--		multiplicateur = 3,5
		<!--	}

**oscaro19** · 09/04/2014, 11h46

Merci a toi Nosmoking!

La fonction direction service marche nikel!

A bientot surement

Incompatibilité entre deux fonctions google maps [Google Maps]

APIs Google

Discussions similaires

Partager

Partager