Discussion :

[mihelicjm]

Bonjour,

Je soulève une question dont je n'ai pas trouvé réponse dans le forum...
Dans l'exemple de base de l'autocompletion address form on a la structure suivante:

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
var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'short_name',
  locality: 'long_name',
  administrative_area_level_1: '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();
  });
}

ce qui implique à avoir le numéro de rue dans un input et la rue juste à coté dans un autre input. Est il possible de ressortir les deux dans le même input soit street_number, espace, route? La section de sortie est celle-ci:

Code html :

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

1
2
3
4
<tr>
    <td class="main b_width"><strong><?php echo ENTRY_STREET_ADDRESS; ?></strong></td>
    <td class="main"><?php echo tep_draw_input_field('street_address','','class="field_adresse" id="route" disabled="true"') . '&nbsp;' . (tep_not_null(ENTRY_STREET_ADDRESS_TEXT) ? '<span class="inputRequirement">' . ENTRY_STREET_ADDRESS_TEXT . '</span>': ''); ?></td>
</tr>

ainsi en sortie l'adresse ressort bien mais sans le numéro de rue. Et si je fais:

Code html :

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

1
2
3
4
<tr>
    <td class="main b_width"><strong><?php echo ENTRY_STREET_ADDRESS; ?></strong></td>
    <td class="main"><input class="field_streetnumber" id="street_number"  disabled="true"></input><?php echo tep_draw_input_field('street_address','','class="field_adresse" id="route" disabled="true"') . '&nbsp;' . (tep_not_null(ENTRY_STREET_ADDRESS_TEXT) ? '<span class="inputRequirement">' . ENTRY_STREET_ADDRESS_TEXT . '</span>': ''); ?></td>
</tr>

les deux éléments s'affichent de façon séparées ce qui ne m'arrange pas. Je cherche à obtenir ce format de sortie:

Quelqu'un aurait il une idée?

[mihelicjm]

Je suis presque arrivé au résultat souhaité sauf que j'ai encore une erreur quelque part. Si une âme charitable voulait bien me donner un coup de pouce...

il y a ce "[object HTMLInputElement]" en trop et je n'arrive pas à trouver l'erreur qui doit se trouver quelque part coté 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
 
// 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: ' ',
  locality: 'long_name',
  administrative_area_level_1: '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();
  });
}
 
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 (addressType == 'street_number') {
                    route += place.address_components[i].long_name + ' ';
                }
                if (place.address_components[i].types[0] == 'route') {
                    route += place.address_components[i].long_name;
                }
				// update the textboxes
            $('#route').val(route);
 
	   if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
 
 
 
  }
}
 
// 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));
    });
  }
}

[NoSmoking]

Bonjour,
pas tout bien saisie mais lorsque l'on concatène via un += il est impératif qu'il y ait initialisation au préalable

Code :

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

1
2
3
4
5
var i, nb = place.address_components.length,
    route = '';
for( i= 0; i < nb ; i++{
  route += ............
}

[mihelicjm]

Bonjour,

Je te remercie du conseil qui doit pointer du doigt la source de mon souci... sauf que je ne comprends pas où placer cette boucle? J'ai essayé de remplacer

Code :

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

$('#route').val(route);

par

Code :

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

1
2
3
4
5
var i, nb = place.address_components.length,
    route = '';
for( i= 0; i < nb ; i++{
  route += $('#route').val(route);
}

mais ça ne marche pas. En fait je n'arrive pas à décrypter ce que veut dire le "route +=". Dois-je laisser tomber la variable $('#route...)??

[mihelicjm]

Cette ligne superflue "[object HTMLInputElement]" doit s'afficher du fait que l'objet street_number + route n'est pas en html? Je cale complètement, incapable de comprendre pourquoi elle apparait... J'ai entre autre essayé ceci qui ne fonctionne pas non plus:

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
for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
 
 
	if (addressType == 'street_number') {
                    route += place.address_components[i].long_name + ' ';
                }
    if (place.address_components[i].types[0] == 'route') {
                    route += place.address_components[i].long_name;
                }
				// update the textboxes
           // $('#route').val(route);
		   var i, nb = place.address_components.length,
    route = '';
for( i= 0; i < nb ; i++{
  route += document.getElementById("route");
}

La ligne "route += document.getElementById("route");" n'est pas bonne?

[mihelicjm]

D'un point de vue logique je ne comprends pas non plus pourquoi cette combinaison ne marche pas:

Code :

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

1
2
3
4
5
6
7
// update the textboxes
           // $('#route').val(route);
		   var i, nb = place.address_components.length,
    route = '';
for( i= 0; i < nb ; i++{
  route += place.address_components[i].street_number + ' '+route;
}

La boucle "route += place.address_components[i].street_number + ' '+route;" appelle pourtant bien l'affichage numéro/espace/rue??