|
| Google Places Autocomplete |
| Débuté par Sylvain, 28 mar. 2018 14:56 - 6 réponses |
| |
| | | |
|
| |
Membre enregistré
141 messages |
|
Posté le 28 mars 2018 - 14:56 |
Bonjour,
Je cherche à mettre en place l'api Google Places Autocomplete dans Webdev mais visiblement, je dois louper un épisode.
Avez-vous déjà implémenté cette api dans vos projets ?
Merci d'avance
Cordialement
Sylvain |
| |
| |
| | | |
|
| | |
| |
Posté le 03 avril 2018 - 12:36 |
Bonjour
Autocomplétion à la Google Chrome qui utilise la base de données au moment de la saisie est une nouveauté WEBDEV 19. pour preuve je te conseille de regarder la video de presentation de WEBDEV 19 et tu veras la demo faite par marc polycarpe. En fait il suffit au niveau des 7 onglet de rattache la rubrique des données au champ de saisie et cocher l'option saisie assistee |
| |
| |
| | | |
|
| | |
| |
Posté le 03 avril 2018 - 12:36 |
Bonjour
Autocomplétion à la Google Chrome qui utilise la base de données au moment de la saisie est une nouveauté WEBDEV 19. pour preuve je te conseille de regarder la video de presentation de WEBDEV 19 et tu veras la demo faite par marc polycarpe. En fait il suffit au niveau des 7 onglet de rattache la rubrique des données au champ de saisie et cocher l'option saisie assistee |
| |
| |
| | | |
|
| | |
| |
Posté le 03 avril 2018 - 17:14 |
Bonjour,
C'est faisable. Voici le résultat.
Voici le code, c'est juste un exemple.
Il y a les champs répétés une seconde fois. Ce qui explique les champs indicé 2 dans la fonction. Il te faudra faire du ménage.
A mettre en init de page.
GenerateJSCode(DF_Address..Alias, DF_PostalCode..Alias, DF_City..Alias, DF_Région..Alias, DF_Country..Alias, DF_Address2..Alias, DF_PostalCode2..Alias, DF_City2..Alias, DF_Région2..Alias, DF_Country2..Alias)
Remplacer YouAPIKey dans la fonction ci dessous.
PROCEDURE GenerateJSCode(arg_Address_InputID, arg_PostalCode_InputID, arg_City_InputID, arg_StateProvinceCode_InputID, arg_Country_InputID, arg_Address2_InputID, arg_PostalCode2_InputID, arg_City2_InputID, arg_StateProvinceCode2_InputID, arg_Country2_InputID)
JSBaseCode est une chaîne =
[
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js… ">
</script>
<script>
var tab1 = { "street_number" : "Address", "route" : "Address", "postal_code" : "%2", "locality" : "%3", "postal_town" : "%3", "administrative_area_level_1" : "%4", "country" : "%5" };
var tab2 = { "street_number" : "Address", "route" : "Address", "postal_code" : "%7", "locality" : "%8", "postal_town" : "%3", "administrative_area_level_1" : "%9", "country" : "%10" };
function GoogleAutocomplete(id, tab)
{
var element = document.getElementById(id);
if (element)
{
var autocomplete = new google.maps.places.Autocomplete(element, { types: ['geocode'] });
google.maps.event.addListener(autocomplete, 'place_changed', function()
{
var place = this.getPlace();
for (var key in tab)
{
if (tab[key] != "Address")
{
document.getElementById(tab[key]).value = "";
}
}
for (var i in place.address_components)
{
var component = place.address_components[i];
for (var j in component.types)
{
var type_element = document.getElementById(tab[component.types[j]]);
if (type_element)
{
if (type_element != "Address")
{
type_element.value = component.long_name;
}
}
}
}
});
}
}
google.maps.event.addDomListener(window, 'load', function()
{
GoogleAutocomplete("%1", tab1);
});
google.maps.event.addDomListener(window, 'load', function()
{
GoogleAutocomplete("%6", tab2);
});
</script>
]
JSCode est une chaîne = ChaîneConstruit(JSBaseCode, arg_Address_InputID, arg_PostalCode_InputID, arg_City_InputID, arg_StateProvinceCode_InputID, arg_Country_InputID, arg_Address2_InputID, arg_PostalCode2_InputID, arg_City2_InputID, arg_StateProvinceCode2_InputID, arg_Country2_InputID)
MaPage..HTMLFinPage = JSCode
PS : Attention aux conflits si tu as utilisé un champs Google Map de webdev en même temps |
| |
| |
| | | |
|
| | |
| |
Posté le 12 juin 2019 - 00:12 |
Ca marche nickel !
un grand merci pour ton aide. |
| |
| |
| | | |
|
| | |
| |
Posté le 12 juillet 2019 - 16:36 |
Bonjour,
Je ne comprend pas l'intégration de la fonction...
j'ai créée une procédure JS. Cependant dans l'initialisation de la page j'ai des erreurs..."Element inconnu ou inaccessible".
Une fois créée comment appeler la Fonction (Procédure) dans le Champ de Saisie?
Merci d'avance !  |
| |
| |
| | | |
|
| | |
| |
Posté le 26 février 2021 - 15:31 |
Cela fonctionne très bien
Perso j'ai supprimé l'utilisation des deux tableaux et des champs dupliqués (je n'y voyais pas d'intérêt).
MERCI |
| |
| |
| | | |
|
| | | | |
| | |
|