Laravel 11 Google Autocomplete Address Example

Websolutionstuff | Jun-26-2024 | Categories : Laravel

Hello, laravel web developers! In this article, we'll see how to create a Google autocomplete address in laravel 11. Here, we'll add an autocomplete address in laravel 11. Autocomplete is a feature of the Places library in the Maps JavaScript API. You can use autocomplete to give your applications the type-ahead-search behavior of the Google Maps search field.

The autocomplete service can match on full words and substrings, resolving place names, addresses, and plus codes.

Here, we'll use Google Maps autocomplete API to search addresses with latitude and longitude with laravel 11.

Laravel 11 Google Autocomplete Address

laravel_11_google_autocomplete_address

Step 1: Install Laravel 11 Application

In this step, we'll install 11 applications using the following command.

composer create-project laravel/laravel example-app

Step 2: Define Route

Now, we'll define the routes into the web.php file

routes/web.php

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

Route::get('google-autocomplete', [GoogleController::class, 'index']);

Step 3: Create Controller

Next, we'll create a controller and add the following code to that file.

app/Http/Controllers/GoogleController.php

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

Step 4: Google Map API Key in .env

Then, add the Google map API key to the .env file.

.env

GOOGLE_MAP_KEY=YOUR_GOOGLE_API_KEY

Step 5: Create Blade File

Next, create a blade file and add the following Google map HTML code to that file.

resources/views/google-autocomplete.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel 11 Google Autocomplete Address Example</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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">Laravel 11 Google Autocomplete Address Example - Websolutionstuff</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 the Laravel 11 Application

Now, run the laravel 11 application using the following code.