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.

php artisan serve

 


You might also like:

Recommended Post
Featured Post
PHP Access Modifiers Example
PHP Access Modifiers Example

In this example we will see PHP access modifiers example. In PHP default access modifier is public. PHP provide differen...

Read More

Sep-06-2021

How To Create Calendar Event In Laravel 9 Using AJAX
How To Create Calendar Event I...

In this article, we will see how to create a calendar event in laravel 9 using ajax. Here, we will learn how to add...

Read More

Dec-28-2022

How To Get Current User Location In Laravel
How To Get Current User Locati...

In this example, I will show you how to get the current user location in laravel, Many times we are required to find the...

Read More

Jun-10-2020

How To Validate Phone Number In Laravel 10
How To Validate Phone Number I...

In this article, we will see how to validate phone numbers in laravel 10. Here, we will learn about mobile number v...

Read More

May-10-2023