La configuration d'une fonction d'adresse de saisie semi-automatique dans Laravel peut améliorer considérablement l'expérience utilisateur. Ce guide vous montrera comment intégrer une fonctionnalité d'adresse de saisie semi-automatique à l'aide de l'API Google Places.

Guide étape par étape pour configurer l'adresse de saisie semi-automatique dans Laravel

Exigences

1. Un projet Laravel.
2. Clé API Google Places.
3. Connaissance de base de jQuery et JavaScript.

Étape 1 : Configurer une clé API Google Places

1. Visitez la console Google Cloud.
2. Créez un nouveau projet (ou utilisez-en un existant).
3. Accédez à API et services > Bibliothèque, puis recherchez l'API Places.
4. Activer l'API Places.
5. Accédez à API et services > Identifiants et créez une clé API. Assurez-vous de restreindre cette clé pour éviter toute utilisation non autorisée.

Étape 2 : installer Laravel et configurer des itinéraires

Créez un projet Laravel (si ce n'est pas déjà fait) :

composer create-project --prefer-dist laravel/laravel address-autocomplete

Créer un contrôleur :

php artisan make:controller AddressController

Maintenant, définissez une route dans routes/web.php :

Route::get('/autocomplete', [AddressController::class, 'index']);

Étape 3 : Créer la logique du contrôleur

Ouvrez app/Http/Controllers/AddressController.php et ajoutez la logique suivante pour renvoyer la vue :

  
  
  Étape 4 : Créer la vue avec le champ de saisie de saisie semi-automatique


Créez le fichier de vue pour autocomplete.blade.php dans le répertoire resources/views :



touch resources/views/autocomplete.blade.php




Dans le fichier autocomplete.blade.php, incluez le formulaire HTML et le script de l'API Google Places :





    
    
    

    
    




    
Autocomplete Address
    

        Address
        
    














  
  
  Explication:

• types : ['geocode'] limite les suggestions aux adresses géocodées.
• Remplacez YOUR_GOOGLE_API_KEY par la clé API que vous avez générée.

Étape 5 : Exécutez l’application Laravel

Exécutez la commande suivante pour servir l'application :

php artisan serve

Visitez http://127.0.0.1:8000/autocomplete dans votre navigateur et vous devriez voir un champ de saisie d'adresse. Commencez à saisir une adresse et l'API Google Places vous proposera des suggestions d'adresse.

Étape 6 : Gérer l'adresse sélectionnée (facultatif)

Si vous souhaitez gérer davantage l'adresse sélectionnée (par exemple, la stocker dans une base de données), vous pouvez modifier le formulaire pour inclure une option de soumission.

Par exemple, vous pouvez ajouter un champ de formulaire supplémentaire :

Modifiez votre JavaScript pour capturer la latitude et la longitude :

var autocomplete = new google.maps.places.Autocomplete(input, options);

autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();
    document.getElementById('latitude').value = place.geometry.location.lat();
    document.getElementById('longitude').value = place.geometry.location.lng();
});

Étape 7 : Créer la méthode Store (facultatif)

Dans votre AddressController, créez une méthode pour stocker l'adresse soumise :

public function storeAddress(Request $request)
{
    $latitude = $request->input('latitude');
    $longitude = $request->input('longitude');

    // Store the address in the database or perform other actions.

    return back()->with('success', 'Address stored successfully.');
}

Ajoutez un itinéraire pour la soumission de ce formulaire dans web.php :

Route::post('/store-address', [AddressController::class, 'storeAddress'])->name('storeAddress');

Conclusion

En suivant ces étapes, vous avez intégré avec succès Google Places Autocomplete dans votre application Laravel. Vous pouvez désormais améliorer l'expérience utilisateur en permettant aux utilisateurs de compléter automatiquement les adresses et vous avez la possibilité de stocker les coordonnées de l'adresse choisie dans votre base de données.