Plusieurs automplete place google search dans le même formulaire

**serna** · 01/04/2014, 17h16

Bonjour,

j'ai besoin d'avoir dans un formulaire un input pour une ville de départ et un autre pour la destination , en plus je dois récupérer dans un hidden le département pour les deux villes

j'en ai fait un d’après un tuto d'autocompletion qu'on trouve ici dans developpez.com , ça marche j'ai mes deux champs départ/arrivé mais je ne suis pas satisfait car ça va interroger une grosse table avec les villes etc et quant l'internaute tape trop vite , il peut zapper le département etc.. et donc problème avec les villes qui ont le même nom

je me suis rabattu vers Google place api qui fonctionne très bien mais comment remplir automatiquement le formulaire avec les données de ville de depart ET ville de destination

voila l'exemple que l'on trouve dans google developper qui ne fonctionne que pour une recherche.
https://developers.google.com/maps/d...te-addressform

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
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
 
var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_2: 'long_name',
  country: 'long_name',
  postal_code: 'short_name'
};
 
function initialize() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
      { types: ['geocode'] });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
}
 
// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();
 
  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }
 
  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
// [END region_fillform]
 
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
      autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
          geolocation));
    });
  }
}
// [END region_geolocation]

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
<body onload="initialize()">
    <div id="locationField">
      <input
              type="text" id="autocomplete" size="60" placeholder="Enter your address"></input>
</div>
 
    <table id="address">
      <tr>
        <td class="label">Street address</td>
        <td class="slimField"><input
              disabled="true" class="field" id="street_number" size="5"></input></td>
        <td class="wideField" colspan="2"><input class="field" id="route"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">City</td>
        <td class="wideField" colspan="3"><input class="field" id="locality"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">State</td>
        <td class="slimField"><input class="field"
              id="administrative_area_level_2" disabled="true"></input></td>
        <td class="label">Zip code</td>
        <td class="wideField"><input class="field" id="postal_code"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">Country</td>
        <td class="wideField" colspan="3"><input class="field"
              id="country" disabled="true"></input></td>
      </tr>
    </table>
  </body>

merci pour votre aide

**NoSmoking** · 02/04/2014, 21h47

Bonjour,
il te faut créer 2 objets distincts

Code :

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

1
2
var oDepart  = new google.maps.places.Autocomplete( document.getElementById('depart'), options);
var oArrivee = new google.maps.places.Autocomplete( document.getElementById('arrivee'), options);

**serna** · 05/04/2014, 11h24

merci noSmoking je vais essayer ta solution

sinon j'ai trouvé un autre moyen d'arriver à ce que je veux

http://www.developpez.net/forums/d14...-d-formulaire/

mais je vais tester ta suggestion

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

j'ai du mal à voir le rapport entre les deux !!!

**serna** · 11/04/2014, 17h27

en fait j'ai dupliqué la fonction en lui affectant un autre nom et je double les input hidden ( je récupère le département dans zip-code 1 et 2 )
comme mon but à l'origine est d'avoir deux autocompletion de villes/ département et d'envoyer les valeur villes ,département à ma page d'insertion , ça me convient

c'est surement trop lourd comme code mais ça marche ( y'a surement moyen d'optimiser le javascipt )

le javascript

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
function changementtypeactivite(Id) {
	var type = document.getElementById(Id).value;
	if (type == "Des jours de la semaine") {
		document.getElementById("Des jours de la semaine"+Id).style.display="block";
	} else{
		document.getElementById("Des jours de la semaine"+Id).style.display="none";
	}
}
function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(46.7666215,2.4335813),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);
 
        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
 
        autocomplete.bindTo('bounds', map);
 
        var infowindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({
          map: map
        });
 
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
          infowindow.close();
          var place = autocomplete.getPlace();
          if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
          } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);  // Why 17? Because it looks good.
          }
          var address = '';
          var zip_code = '';
          document.getElementById('zip_code').innerHTML=zip_code;
          if (place.address_components) {
            address = [
              (place.address_components[0] && place.address_components[0].short_name || ''),
              (place.address_components[1] && place.address_components[1].short_name || ''),
              (place.address_components[2] && place.address_components[2].short_name || '')
            ].join(' ');
            for (var i=0; i<place.address_components.length;i++)
	    {
              for (var j=0;j<place.address_components[i].types.length;j++)
              {
                if (place.address_components[i].types[j] == "administrative_area_level_2")
                {
                  zip_code = place.address_components[i].long_name;
                <!--  document.getElementById('zip_code').innerHTML=zip_code;-->
				  document.getElementById('zip_code').value=zip_code;
                }
              }
	    }
          }
 
          infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
          infowindow.open(map, marker);
        });
 
        // Sets a listener on a radio button to change the filter type on Places
        // Autocomplete.
        function setupClickListener(id, types) {
          var radioButton = document.getElementById(id);
          google.maps.event.addDomListener(radioButton, 'click', function() {
            autocomplete.setTypes(types);
          });
        }
 
        setupClickListener('changetype-all', []);
        setupClickListener('changetype-establishment', ['establishment']);
        setupClickListener('changetype-geocode', ['geocode']);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
 
 <!-- script pour geocomplete 2-->   
      <script>
      function initialize2() {
        var mapOptions = {
          center: new google.maps.LatLng(46.7666215,2.4335813),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);
 
        var input = document.getElementById('searchTextField2');
        var autocomplete = new google.maps.places.Autocomplete(input);
 
        autocomplete.bindTo('bounds', map);
 
        var infowindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({
          map: map
        });
 
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
          infowindow.close();
          var place = autocomplete.getPlace();
          if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
          } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);  // Why 17? Because it looks good.
          }
 
          var address2 = '';
          var zip_code2 = '';
          document.getElementById('zip_code').innerHTML=zip_code2;
          if (place.address_components) {
            address2 = [
              (place.address_components[0] && place.address_components[0].short_name || ''),
              (place.address_components[1] && place.address_components[1].short_name || ''),
              (place.address_components[2] && place.address_components[2].short_name || '')
            ].join(' ');
            for (var i=0; i<place.address_components.length;i++)
	    {
              for (var j=0;j<place.address_components[i].types.length;j++)
              {
                if (place.address_components[i].types[j] == "administrative_area_level_2")
                {
                  zip_code2 = place.address_components[i].long_name;
                  <!--document.getElementById('zip_code').innerHTML=zip_code;-->
				  document.getElementById('zip_code2').value=zip_code2;
                }
              }
	    }
          }
 
          infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
          infowindow.open(map, marker);
        });
 
        // Sets a listener on a radio button to change the filter type on Places
        // Autocomplete.
        function setupClickListener(id, types) {
          var radioButton = document.getElementById(id);
          google.maps.event.addDomListener(radioButton, 'click', function() {
            autocomplete.setTypes(types);
          });
        }
 
        setupClickListener('changetype-all', []);
        setupClickListener('changetype-establishment', ['establishment']);
        setupClickListener('changetype-geocode', ['geocode']);
      }
      google.maps.event.addDomListener(window, 'load', initialize2);

et le formulaire

Code html :

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

1
2
3
4
 <input  class="input-lg required"  type="text" id="searchTextField" name="depart" size="50" placeholder="Indiquez une adresse de départ" />
<input class="input-lg required"   type="text" id="searchTextField2" name="destination" size="50" placeholder="Indiquez une adresse de déstination" />
<input type="hidden" name="depstart" id="zip_code" >
<input type="hidden" name="depfinish" id="zip_code2" >

**NoSmoking** · 13/04/2014, 11h28

c'est surement trop lourd comme code mais ça marche ( y'a surement moyen d'optimiser le javascipt )

je ne te le fait pas dire, duplication de code est souvent source de problème à commencer par pourquoi créer 2 fois une même carte, tu peux faire le ménage sans grande difficulté.

Plusieurs automplete place google search dans le même formulaire

APIs Google

Discussions similaires

Partager

Partager