Intégrer Autocomplete de GMap API

4.0
Tags: #<Tag:0x00007f7d7b2167b8>
Intégrer Autocomplete de GMap API
0

(Thomas Acchiardo) #1

Bonjour,

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.

Cas d’application :
Objet : Client
Att0 : cliCode
Att1 : cliName
Att2 : cliAddressClient

Je vais ensuite dans la définition de l’objet Client, ressource, je crée une ressource

Et j’essaie d’adapter le code JS :

CompletionAddress = (function($) {

//Fonction GGMap
var autocomplete;

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.

Si vous pouvez me débloquer,

Merci d’avance,

Thomas


(David AZOULAY) #2

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.

Commencez déjà par vous familiariser avec la syntaxe de base les hooks de la UI responsive, cf. https://www.simplicite.io/resources/documentation/04-ui/responsive.md ainsi que ce post: Ajouter une action quand on quitte une zone de saisie ensuite vous pourrez intégrer votre API tierce plus facilement.

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)


(David AZOULAY) #3

Bon j’ai testé ça marche bien:

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>&amp;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:

TestObject1 = (function(ui) {
	if (!ui) return; // Do nothing on legacy UI
	Simplicite.UI.hooks.TestObject1 = function(o, cbk) {
		try {
			 o.locals.ui.form.onload = function(ctn, obj) {
			 	try {
					var addr = ui.getUIField(ctn, obj, "tstObj1Address").ui.input[0];
					new google.maps.places.SearchBox(addr);
				} catch (el) {
					console.error(el.message);
			 	}
			};
		} catch (e) {
			console.error(e.message);
		} finally {
			cbk && cbk();
		}
	};
})(window.$ui);

A noter la manière dont on récupère l’input HTML

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).


(David AZOULAY) #4

PS: cet exemple a été ajouté à la doc relative à la UI responsive https://www.simplicite.io/resources/documentation/04-ui/responsive.md


(Thomas Acchiardo) #5

Merci David pour toutes ces précisions.
Je vais tester ça, mais avec tes explications, cela ne devrait pas poser de problème.
Bonne journée,
Thomas


(David AZOULAY) #6

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


(Thomas Acchiardo) #7

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”.

Merci d’avance pour votre retour,
Thomas


(David AZOULAY) #8

Je n’ai pas bien compris le pb . Mettez des copies d’écran svp


(Thomas Acchiardo) #9

Bonjour,
Voilà les captures d’écran comme demandé :

  • Création d’une adresse via l’objet adresse
    On voit ici que la searchBox apparait bien (le fonctionnement est normal)

  • 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

  • La searchBox n’apparaît pas

J’espère que ces captures d’écran vous permettront de mieux comprendre et cerner le problème.
Bonne journée à vous,
Thomas


(David AZOULAY) #10

Ok, on parle du cas de la création en popup.
Je vais regarder


#11

@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”).


(David AZOULAY) #12

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.


(David AZOULAY) #13

1er cas: popup de création

En popup de création ça marche sauf qu’il y a un pb de z-index entre popup et l’autocomplete Google:

L’autocomplete se retrouve derrière la popup.


(David AZOULAY) #14

En créant une resource CSS STYLES sur votre objet avec le contenu suivant:

.pac-container {
    z-index: 1999 !important;
}

Le pb est réglé:

EDIT: on a intégré cette directive CSS au socle


(David AZOULAY) #15

2ème cas: edition/creation en liste

Pour gérer ce cas en plus du cas du formulaire principal, le code est un peu plus compliqué, j’ai mis à jour l’exemple das https://www.simplicite.io/resources/documentation/04-ui/responsive.md

Une fois qu’on mis en place ce genre de code ça marche aussi en édition en liste:

et en création en liste:


(Thomas Acchiardo) #16

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


(David AZOULAY) #17

Oui il y avait une coquille dans l’exemple. Merci
C’est corrigé