Problème google places autocomplete sur modal

Par Trueman29los, il y a 2 ans

Javascript
PHP Symfony

Bonjour @tous,

J'arrive pas à afficher dans le champ adresse de mon formulaire sur modal popup, le google places autocomplete.
Voici mon code :

#Lien Google Map <script src="https://maps.googleapis.com/maps/api/js?key=MaCleAPI&libraries=places&callback=initAutocomplete" async defer></script> #End Lien #Twig <div class="modal-header"> <h5 class="modal-title" id="addCollaboratorModalLabel">Ajouter un collaborateur</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal fade" id="addCollaboratorModal" tabindex="-1" aria-labelledby="addCollaboratorModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="addCollaboratorModalLabel">Ajouter un collaborateur</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> {{ form_start(form1) }} <div class="modal-body"> <div class="row"> <div class="col-12 col-sm-6 mb-1"> {{ form_row(form1.address) }} </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal"> <i class="fas fa-times me-25"></i> <span>Annuler</span> </button> <button type="submit" class="btn btn-primary"> <i class="fas fa-check me-25"></i> <span>Valider</span> </button> </div> {{ form_end(form1 , {'render_rest': false}) }} </div> #End Twig #FormType ->add('address', TextType::class, [ 'label' => 'Adresse', 'label_attr' => [ 'class' => 'form-label' ], 'constraints' => [ new NotBlank([ 'message' => 'Ce champ est obligatoire !', ]), new Length([ 'min' => 3, 'minMessage' => 'L\'adresse doit avoir au moins {{ limit }} caractères.', ]), ], 'attr' => [ 'class' => 'form-control pac-target-input', 'placeholder' => 'Choisissez l\'adresse', 'minlength' => 3, 'autocomplete' => 'off', 'data-autocomplete' => 'google-collaborateur' ], 'required' => true ]) #End FormType #JS <script type="text/javascript"> var addressFields = document.querySelectorAll('[data-autocomplete="google-collaborateur"]'); addressFields.forEach(function (addressField) { var autocomplete = new google.maps.places.Autocomplete(addressField, { types: ['geocode'] }); autocomplete.addListener('place_changed', function () { var place = autocomplete.getPlace(); if (place.formatted_address) { addressField.value = place.formatted_address; } document.querySelector('[name="sg_collaborator_add[postalCode]"]').value = place.address_components.find(c => c.types.includes('postal_code'))?.long_name || ''; document.querySelector('[name="sg_collaborator_add[city]"]').value = place.address_components.find(c => c.types.includes('locality'))?.long_name || ''; }); }); </script> #END JS

NB: Mon code ça marche si je n'affiche pas le google place automplete dans l'autres champ de formulaire qui n'est pas dans un modal popup.

Merci d'avance !

3 réponses

Trueman29los, il y a 2 ans

Pas claire ?

Grafikart, il y a 2 ans

Oui j'ai du mal à voir ce que tu veux dire par "dans un modal popup" ce qui change entre le cas qui marche et celui qui marche pas

Trueman29los, il y a 2 ans

@Grafikart, je veux afficher les noms des lieux, ville, pays dans mon champ adresse au niveau du formulaire sur modal en utilisant l'API Google Place mais il ne marche pas tandis que je l'affiche tout simplement sur un champ d'adresse du formulaire sans utiliser le modal, il marche.

Mais il est résolu en ajoutant ce code css dans la base.html.twig
div.pac-container {
z-index: 10000 !important;
}

Merci à tous !