Je souhaiterais utiliser la fonction de saisie semi-automatique mise à disposition par GoogleMap Javascript API : Autocomplete. Elle permet à l’utilisateur de commencer à saisir le début d’une adresse et de choisir parmi le choix d’adresse proposer et de populer le champ une fois que l’utilisateur à cliquer dessus.
Je souhaiterais donc faire appel à cette fonction lorsqu’une personne saisit son adresse (ou l’adresse physique d’un bien), lors de la création de l’objet.
J’ai plutôt bien compris comment fonctionne l’API en dehors de Simplicité (j’ai créé un page HTML qui fait appel à un fichier .JS sur lequel on retrouve le “code” associé à la fonction Autocomplete). Sauf que je n’arrive pas à l’intégrer dans Simplicité : j’ai essayé de l’adapter de la même manière que l’exemple pour la génération d’une map avec PinPoint.
function initAutocomplete() {
autocomplete = new google.maps.places.Autocomplete((getFieldValue(“cliAddressClient”/Le “Nom logique Attribut”/ )), {types:[‘geocode’]});
}
//Réduire le champ de recherche à la localisation
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
});
autocomplete.setBounds(circle.getBounds());
});
}
}
})(jQuery);
Je pense que le problème vient d’une erreur d’adoption du code de ma part.
Il n’y a en général aucun pb pour intégrer une API JS tierce a la UI générique Simplicité.
Pour être chargée automatiquement par défaut votre resource JS doit s’appeler SCRIPT (resp. STYLES pour la resource CSS par défaut) on peut charger d’autres resources autrement mais il faut le faire explicitement.
PS: Dans la démo il y a un exemple très simple d’intégration de l’API du bouton “start a hangout” sur l’objet DemoClient, le code est un peu plus complexe car il gère à la fois la syntaxe de la UI legacy et de la UI responsive mais sur le principe c’est un bon exemple (l’include du JS Google est dans le HTML du template, le code est dans le resource SCRIPT)
Il y a juste une subtilité: il faut mettre l’include <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<your key>&libraries=places" async defer></script> au niveau d’une des resources HTML de la disposition (si on le met au niveau du template de l’objet Google râle - légitimement - en disant pas charger cette API plusieurs fois), je l’ai donc mis dans la resource MAIN de la disposition responsive (NB: on va réfléchir plus tard à comment améliorer ça pour éviter de devoir modifier une ressource système)
Voici mon code dans la resource SCRIPT de l’objet:
A noter aussi les try/catch qui ne sont pas optionnels, ils “protègent” le reste de la page (pour mémoire la UI responsive est “one page”) en cas de pb dans votre code (ou dans celui de Google).
J’ai amélioré l’exemple dans https://www.simplicite.io/resources/documentation/04-ui/responsive.md (§ “Google Maps autocomplete API”) pour gérer le chargement dynamique de l’API Google directement dans le code, comme ça pas besoin de modifier la resource système de la disposition
Bonjour,
Je voulais savoir si vous aviez eu le temps de regarder le problème concernant l’affichage de la searchBox évoquait lors de notre rencontre avec Nathalie.
Pour rappel :
Dans l’objet où la ressource est mise (adresse), pas de souci, la searchBox apparait bien quand on commence à écrire.
Pas d’affichage lorsque l’on essaie de créer une adresse via un autre objet, la searchBox ne s’affiche pas (création d’une adresse via l’objet Biens). Pourtant, le placeholder du field indique bien “saisissez une requête”.
Création d’une adresse via l’objet Biens (liés à l’objet adresse évidemment)
On voit ici le champs où l’on doit taper l’adresse avec le place holder : Saisissez une requête
@Thomas, @david : Cette fonctionnalité ne marche pas non plus en passant par “Créer en liste” ? (en plus, le placeholder du field n’indique pas “saisissez une requête”).
Cette “fonctionnalité” n’est en aucun cas une fonctionnalité socle. Je vous ai juste fourni un exemple de code specifique destiné à enrichir un formulaire de saisie principal. Je n’ai jamais prétendu que ce code spécifique là marcherai aussi dans d’autres contextes.
Je regarderai à l’occasion les 2 cas du formulaire en popup et du formulaire en liste et vous dirai comment aborder le sujet dans ces contextes là si c’est faisable.
Tout d’abord, désolé de ma réponse tardive, mais je te remercie pour l’ensemble de ces explications et corrections !
Si je ne me trompe pas, il y a une erreur dans le code ajouté dans l’exemple pour que la searchBox apparaisse en ligne:
Ce n’est pas : var ac = new google.maps.places.Autocomplete(inp);
mais : var ac = new google.maps.places.Autocomplete(addr);