Laravel 11 Google Autocomplete Address Example

By Hardik Savani May 2, 2024 Category : Laravel

we will learn how to add google autocomplete address using google map place api in laravel 11 application.

Google Autocomplete Address is a feature provided by Google Maps, the popular online mapping service. It is designed to simplify and expedite the process of entering accurate addresses by automatically predicting and suggesting addresses as users type into the search bar. When a user begins typing an address in the search bar on Google Maps or another Google product that utilizes the address autocomplete feature, Google's algorithm starts predicting and suggesting possible addresses based on the input provided. These suggestions are displayed in a dropdown list beneath the search bar, and the user can choose from the suggestions or continue typing to refine the search.

Sometimes we need to use Google Maps autocomplete API for getting correct addresses with latitude and longitude with Laravel. I will help you step by step how to use the Google Maps API for autocomplete addresses in a Laravel app.

laravel 11 google autocomplete

Step for Google place autocomplete API with Laravel 11?

  • Step 1: Create Route
  • Step 2: Create Controller
  • Step 3: Google Map API Key in Env
  • Step 4: Create Blade File
  • Run Laravel App:

Step 1: Create Route

In this step, we need to create some routes for Google Autocomplete Address Example view.

routes/web.php

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

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

Step 2: Create Controller

In this step, we need to create a `GoogleController` 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('googleAutocomplete');
    }
}

Read Also: Laravel 11 Drag and Drop File Upload with Dropzone JS

Step 3: Google Map API Key in Env

Here, we will add a new variable in the .env file to set the Google Maps API key. So let's add it as below:

.env

GOOGLE_MAP_KEY=YOUR_GOOGLE_API_KEY

Step 4: Create Blade File

here, we need to create blade files for google autocomplete example. so let's create one by one files:

resources/views/googleAutocomplete.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Google Autocomplete Address Example</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">Laravel 11 Google Autocomplete Address Example - ItSolutionStuff.com</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>

Run Laravel App:

Now we are ready to run our example. so run bellow command so quick run:

php artisan serve

Now you can open bellow URL on your browser:

Read Also: Laravel 11 Ajax Dependent Dropdown Example
http://localhost:8000/google-autocomplete

Preview:

I hope it can help you...

Tags :
Previous

Laravel 11 Ajax Dependent Dropdown Example
Next

Laravel 11 Livewire CRUD using Jetstream & Tailwind CSS

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares