Setting up an autocomplete address feature in Laravel can significantly improve the user experience. This guide will show you how to integrate an autocomplete address functionality using the Google Places API.

Step-by-Step Guide to Setting Up Autocomplete Address in Laravel

Requirements

1. A Laravel project.
2. Google Places API key.
3. Basic knowledge of jQuery and JavaScript.

Step 1: Set Up a Google Places API Key

1. Visit the Google Cloud Console.
2. Create a new project (or use an existing one).
3. Navigate to APIs & Services > Library, and search for the Places API.
4. Enable the Places API.
5. Go to APIs & Services > Credentials and create an API key. Make sure to restrict this key to avoid unauthorized usage.

Step 2: Install Laravel and Set Up Routes

Create a Laravel project (if you haven’t already):

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

Create a controller:

php artisan make:controller AddressController

Now, define a route in routes/web.php:

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

Step 3: Create the Controller Logic

Open app/Http/Controllers/AddressController.php and add the following logic for returning the view:

  
  
  Step 4: Create the View with Autocomplete Input Field


Create the view file for autocomplete.blade.php in the resources/views directory:



touch resources/views/autocomplete.blade.php




In the autocomplete.blade.php, include the HTML form and Google Places API script:





    
    
    

    
    




    
Autocomplete Address
    

        Address
        
    














  
  
  Explanation:

• types: ['geocode'] limits the suggestions to geocoded addresses.
• Replace YOUR_GOOGLE_API_KEY with the actual API key you generated.

Step 5: Run the Laravel Application

Run the following command to serve the application:

php artisan serve

Visit http://127.0.0.1:8000/autocomplete in your browser, and you should see an address input field. Start typing an address, and Google Places API will provide address suggestions.

Step 6: Handle the Selected Address (Optional)

If you want to handle the selected address further (e.g., store it in a database), you can modify the form to include a submission option.

For example, you can add an additional form field:

Modify your JavaScript to capture the latitude and 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();
});

Step 7: Create the Store Method (Optional)

In your AddressController, create a method to store the submitted address:

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.');
}

Add a route for this form submission in web.php:

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

Conclusion

By following these steps, you have successfully integrated Google Places Autocomplete in your Laravel application. You can now enhance user experience by allowing users to autocomplete addresses, and you have the option to store the chosen address coordinates in your database.