Guide to Integrating Google Places Autocomplete in Laravel

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

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

Step 1: Set Up a Google Places API Key

Visit the Google Cloud Console.
Create a new project (or use an existing one).
Navigate to APIs & Services > Library, and search for the Places API.
Enable the Places API.
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:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class AddressController extends Controller
{
    public function index()
    {
        return view('autocomplete');
    }
}

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Address Autocomplete</title>

    <!-- Add Bootstrap CSS for styling (optional) -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
    <h2>Autocomplete Address</h2>
    <div class="form-group">
        <label for="autocomplete">Address</label>
        <input type="text" id="autocomplete" class="form-control" placeholder="Enter your address">
    </div>
</div>

<!-- Google Places API -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&libraries=places"></script>

<script>
    function initialize() {
        var input = document.getElementById('autocomplete');
        var options = {
            types: ['geocode'], // Restrict results to addresses
        };
        var autocomplete = new google.maps.places.Autocomplete(input, options);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

</body>
</html>

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:

<form method="POST" action="{{ route('storeAddress') }}">
    @csrf
    <input type="hidden" id="latitude" name="latitude">
    <input type="hidden" id="longitude" name="longitude">
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

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.

Blog