Code your dreams into reality.
Every line of code is a step towards a better future.
Embrace the bugs, they make you a better debugger.
Laravel 11 Google Autocomplete Address Tutorial

Laravel 11 Google Autocomplete Address Tutorial

Last Updated on April 15, 2024 by

The Google Places API allows users to create an autocomplete search address feature in Laravel 11 forms while users type their address in it, providing suggestions for complete addresses.

Let’s get started creating a Google autocomplete address using the Google Places API:

Step 1: Set Up Google API Key

First, you need to obtain a Google API key to use the Places API for address autocomplete. Follow these steps to get the API key:

  • Go to the Google Cloud Console.
  • Create a new project or select an existing one.
  • Enable the “Places API” for your project.
  • Generate an API key for your project.

Step 2: Create a Form with Autocomplete Input

Create autocomplete.blade.php in resources/views folder and create a form in it where users can input their address and it populates the autocomplete suggestions.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel 11 Google Autocomplete Address - itcodstuff.com</title>
    <!-- Include Bootstrap CSS if needed -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
      
    <div class="row mt-5">
        <div class="col-md-6 offset-md-3">
            <h2>Laravel 11 Google Autocomplete Address - itcodstuff.com</h2>
            <form>
                <div class="mb-3">
                    <label for="autocomplete" class="form-label">Address</label>
                    <input type="text" class="form-control" id="autocomplete" placeholder="Enter your address">
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>

    </div>
    <!-- Include Google Places API Script -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
</body>
</html>

Step 3: Include Google Places API and Script

In your Laravel project, include the Google Places API script in your blade view file. Open resources/views/layouts/autocomplete.blade.php add the following script and tag in it:

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
    <script>
        function initAutocomplete() {
            var input = document.getElementById('autocomplete');
            var autocomplete = new google.maps.places.Autocomplete(input);
        }
        google.maps.event.addDomListener(window, 'load', initAutocomplete);
    </script>

Replace YOUR_API_KEY with the API key you obtained from the Google Cloud Console.

Step 4: Add Route

Add a route to access the autocomplete form. Open routes/web.php and add:

use Illuminate\Support\Facades\Route;

Route::get('/autocomplete', function () {
    return view('autocomplete');
});

Step 5: Test Your Application

Now, you can run your Laravel development server:

php artisan serve

Hit http://localhost:8000/autocomplete url in your browser to see the form with the Google Autocomplete feature enabled in laravel 11.

Leave a Comment