DEV Community

Cover image for Guide to Integrating Google Places Autocomplete in Laravel
MD ARIFUL HAQUE
MD ARIFUL HAQUE

Posted on

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

  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
Enter fullscreen mode Exit fullscreen mode

Create a controller:

php artisan make:controller AddressController
Enter fullscreen mode Exit fullscreen mode

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

Route::get('/autocomplete', [AddressController::class, 'index']);
Enter fullscreen mode Exit fullscreen mode

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');
    }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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();
});
Enter fullscreen mode Exit fullscreen mode

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.');
}
Enter fullscreen mode Exit fullscreen mode

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

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

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.

Top comments (0)