PC SOFT

FORUMS PROFESSIONNELS
WINDEVWEBDEV et WINDEV Mobile

Accueil → WINDEV Mobile 2024 → Autocomplete Google API dans Windev mobile
Autocomplete Google API dans Windev mobile
Débuté par Jean-Marie, 08 fév. 2015 17:24 - 8 réponses
Posté le 08 février 2015 - 17:24
Bonjour,

Dans mon site Webdev 20 j'utilise l'autocomplétion des adresses postales de l'api google maps (dans un champ de saisie l'utilisateur commence à saisir une adresse et Google complète et propose plusieurs adresses)

Je fais ceci de la manière suivante:

1 - en insérant le javascript suivant dans l'onglet avancé de la description de la page Webdev, dans le champ "Code HTML ajouté à l'entête de la page":
<script type="text/javascript" src=" https://maps.googleapis.com/maps/api/js… "></script>

2 - dans le code navigateur de chargement de la page, en insérant l'appel à une procédure globale JS dont voici le code:

function AutocompleteSurAdresse(AliasChamp)
{
//recherche du champ
var input = document.getElementById(AliasChamp);
var options = {
componentRestrictions: {country: 'fr'}
};
//Active l'auto-complétion
var autocomplete = new google.maps.places.Autocomplete(input);
}

Tout ceci fonctionne très bien dans Webdev 20 et MA QUESTION EST LA SUIVANTE:
-> Comment puis je reproduire ce fonctionnement dans Windev Mobile 20 ?

Merci,
Cordialement,
Jean-Marie.
Posté le 15 mai 2015 - 15:04
Bonjour Jean-Marie,

je n'ai malheureusement pas la réponse à ta question cependant la méthode que tu décris en Webdev m’intéresse et à ma grande surprise Webdev plante (Webdev à cessé de fonctionner) dès que je switch du WL au JS.

Comment appel tu la procédure globale JS ? En postant directement le code JS dans le code navigateur ?


Merci par avance pour ta réponse.

Boris
Posté le 28 août 2015 - 09:02
Bonjour Boris,

Désolé pour la réponse tardive, je pensais que le forum "m’avertirait" en cas de réponse à ma question.

Dans le code Navigateur de chargement de la page, j'ajoute le code:

AutocompleteSurAdresse(SAI_LIEU..Alias)

SAI_LIEU est le nom du champ de saisie dans lequel l'utilisateur saisit l'adresse qui est complétée par Google.

Si quelqu'un savait comment faire la même chose dans Windev Mobile ça m'arrangerait.

a+
jm
Posté le 03 juillet 2016 - 11:40
Bonjour,

Quelle url exacte faut-il utiliser dans la balise <script ..></script> ?

Merci,
Bien cordialement,
Hatim
Posté le 16 novembre 2017 - 18:39
Bonsoir,
Je cherche à utiliser l'API google pour permettre l'autocompletion d'une adresse sur un champ de saisie.
Je travaille avec Webdev 20.
J'ai essayé d'utiliser votre méthode mais rien ne se passe lorsque je commence à saisir une adresse dans mon champ de saisie.
Pouvez-vous m'apporter plus de détails sur votre développement ?
Merci par avance.
Membre enregistré
141 messages
Posté le 09 mars 2018 - 11:22
Bonjour Jean-Marie,

J'ai appliqué à la lettre ton code qui semble fonctionner sauf que j'ai systématiquement l'erreur ci-après dans la console

Your site URL to be authorized: http://...

J'ai essayé de ne mettre aucune "restriction relative aux applications" sur l'API Google puis de déclarer des référents http sous différentes formes avec des ., des *,... mais rien n'y fait.

Est-ce qu'il y a d'autres informations à renseigner dans la console Google API pour que cela fonctionne ?

Merci d'avance

Sylvain
Posté le 14 octobre 2018 - 18:37
Je vais essayer d'aider avec ceci, en essayant d'écrire en français

Créez un fichier avec l'extension CSS que je décris à la fin du message, que vous pourrez ensuite modifier en fonction du champ de votre écran.

Créez un fichier avec l'extension JS qui ne peut pas être modifié, il fera tout le PLACEAUTOCOMPLETE GOOGLE

Sur la page "Avancé", ajoutez le script suivant dans "Code HTML ajouté à la page d'en-tête".
<lien type = "texte / css" rel = "feuille de style" href = "/ fichier APPLICATION_WEB / css / css.css">

Sur la page "Avancé", ajoutez le script suivant dans "Code HTML ajouté à la fin de la page".
<script src = "https://maps.googleapis.com/maps/api/js… CLÉ & libraries = places & callback = initAutocomplete" différé async>> / script>

Créez un champ EDIT et dans la partie "Advanced" de ce champ mettez le script suivant
AVANT
<div id = "locationField">
<input id = "source" placeholder = "Entrez l'adresse source"
onFocus = "geolocate ()" type = "text"> </ input>
</ div>


<table id = "address" style = "display: none">
<tr>
<td class = "label"> Adresse </ td>
<td class = "slimField"> <input class = "field" id = "street_number"
disabled = "true"> </ input> </ td>
<td class = "wideField" colspan = "2"> <entrée class = "field" id = "route"
disabled = "true"> </ input> </ td>
</ tr>
<tr>
<td class = "label"> Ville </ td>
<td class = "wideField" colspan = "3"> <entrée class = "field" id = "localité"
disabled = "true"> </ input> </ td>
</ tr>
<tr>
<td class = "label"> Etat </ td>
<td class = "slimField"> <input class = "field"
id = "administrative_area_level_1" disabled = "true"> </ input> </ td>
<td class = "label"> Code postal </ td>
<td class = "wideField"> <input class = "field" id = "code_postal"
disabled = "true"> </ input> </ td>
</ tr>
<tr>
<td class = "label"> Pays </ td>
<td class = "wideField" colspan = "3"> <input class = "field"
id = "pays" disabled = "true"> </ input> </ td>
</ tr>
APRÈS
</ table>
<script type = "text / javascript" src = "/ APLICACAO_WEB / js / FileJS.js"> </ script>

En général, sur votre page, vous devez changer l'option "Standard de génération" en "Redéfinir pour cette page" HMTL5 et désélectionner "Compresser le code JavaScript".

Pour enregistrer le résultat qui est dans le champ de Google pour un champ de votre table, vous pouvez utiliser le code suivant dans JAVA:

Votre champ = Recoversource ()

fonction RetrieveOrigem ()
{
var locOrigemGoogle = document.getElementById ('source'). value
renvoyer locOrigemGoogle;
}


Là!

Votre application utilisera déjà l'API Google pour PlaceAutocomplete.

Ici au Brésil, les outils PCSOFT ne sont pas pris en charge

Le seul représentant ici semble ne pas bien connaître les outils.

J'utilise toujours WebDev, mais pour mobile, je vais migrer vers XAMARIN, car ce qui fonctionne avec JavaScript dans WebDev ne fonctionne pas du tout dans WinDev Mobile, ce qui est même nécessaire pour Jean-Marie.

ARQUIVO CSS
==========
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css…">
<style>
#locationField, #controls {
position: relative;
width: 480px;
}
#origem {
position: absolute;
top: 223px;
left: 185px;
width: 775px;
height: 40px;
}
.label {
text-align: right;
font-weight: bold;
width: 100px;
color: #3FBAE4;
}
#address {
border: 1px solid #000090;
background-color: #f0f0ff;
width: 480px;
padding-right: 2px;
}
#address td {
font-size: 10pt;
}
.field {
width: 99%;
}
.slimField {
width: 80px;
}
.wideField {
width: 200px;
}
#locationField {
height: 20px;
margin-bottom: 2px;
}

ARQUIVO JS
=========
var placeSearch, autoorigem;
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 initAutocomplete() {
autoorigem = new google.maps.places.Autocomplete(
(document.getElementById('origem')),{types: []});
autoorigem.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
var place = autoorigem.getPlace();

for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}

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;
}
}
}

function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autoorigem.setBounds(circle.getBounds());
});
}
}
Posté le 15 octobre 2018 - 07:11
@jean Marie dans la LST n°108 : Android Dialogue HTML l'exemple propose d'exécuter un code javascript sur un champ HTML.
Cet exemple est compatible avec la version 20 de WM.
Pour ceux qui ont la 23 la fonction executejs permet de faire cela.
Membre enregistré
12 messages
Popularité : -1 (1 vote)
Posté le 01 juin 2019 - 20:37
Bonjour,

Alors pour la solution android ? vous avez trouvé quoi ?