Google Autocomplete Address Example Laravel

August 26, 2024 - By admin

Google Autocomplete Address Example Laravel, we’ll explore how to integrate Google Autocomplete Address into a Laravel application using the Google Maps Place API. We’ll guide you through the steps to add this feature, allowing users to easily search and select addresses within your Laravel app.

Google Autocomplete Address Example Laravel

Google Maps offers an Autocomplete Address feature that streamlines the process of entering accurate addresses by predicting and suggesting them as users type in the search bar. As soon as a user starts typing an address, Google’s algorithm begins generating possible address suggestions based on the input. The suggestions appear in a dropdown list below the search bar, allowing the user to select an option or keep typing to narrow down the search.

Step for Google place autocomplete API

Step 1: Get Google Maps API Key.
Step 2: Create Route
Step 3: Create Controller
Step 4: Google Map API Key in Env.
Step 5: Create Blade File
Step 6:Run Laravel App:

Step 1: Get Google Maps API Key

Go to the Google Cloud Console.
Create a new project or use an existing one.
Navigate to the API & Services section and enable the Places API.
Generate an API key.

Step 2: Create Route

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\AddressController;

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

Step 3: Create Controller

we need to create a `AddressController` and add the following code to that file:

app/Http/Controllers/AddressController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use Illuminate\View\View;
  
class AddressController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index(): View
    {
        return view('autocomplete_address');
    }
}

Step 4: Google Map API Key in Env.

.env

GOOGLE_MAP_KEY=YOUR_GOOGLE_API_KEY

Step 5: Create Blade File

resources/views/autocomplete_address.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Google Autocomplete Address Example Laravel</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
  
<body>

<div class="container">
    <div class="card mt-5">
        <h3 class="card-header p-3">Google Autocomplete Address Example Laravel</h3>
        <div class="card-body"> 
            <form>
                <div class="form-group">
                    <label>Location/City/Address</label>
                    <input type="text" name="autocomplete" id="autocomplete" class="form-control" placeholder="Choose Location">
                </div>
          
                <div class="form-group" id="latitudeArea">
                    <label>Latitude</label>
                    <input type="text" id="latitude" name="latitude" class="form-control">
                </div>
          
                <div class="form-group" id="longtitudeArea">
                    <label>Longitude</label>
                    <input type="text" name="longitude" id="longitude" class="form-control">
                </div>

                <button type="submit" class="btn btn-primary mt-2">Submit</button>
            </form>
        </div>
    </div>
</div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script type="text/javascript"
    src="https://maps.google.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}&libraries=places" >
<script>
    $(document).ready(function () {
        $("#latitudeArea").addClass("d-none");
        $("#longtitudeArea").addClass("d-none");
    });
</script>
<script>
    google.maps.event.addDomListener(window, 'load', initialize);

    function initialize() {
        var input = document.getElementById('autocomplete');
        var autocomplete = new google.maps.places.Autocomplete(input);

        autocomplete.addListener('place_changed', function () {
            var place = autocomplete.getPlace();
            $('#latitude').val(place.geometry['location'].lat());
            $('#longitude').val(place.geometry['location'].lng());

            $("#latitudeArea").removeClass("d-none");
            $("#longtitudeArea").removeClass("d-none");
        });
    }
</script>

</body>
</html>

Step 6:Run Laravel App