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



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


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.


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.




Step 5: Create Blade File

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


<!DOCTYPE html>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel 11 Google Autocomplete Address Example</title>
    <link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <script src=""></script>

<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"> 
                <div class="form-group">
                    <input type="text" name="autocomplete" id="autocomplete" class="form-control" placeholder="Choose Location">
                <div class="form-group" id="latitudeArea">
                    <input type="text" id="latitude" name="latitude" class="form-control">
                <div class="form-group" id="longtitudeArea">
                    <input type="text" name="longitude" id="longitude" class="form-control">

                <button type="submit" class="btn btn-primary mt-2">Submit</button>
<script src=""></script>
<script src=""></script>

<script type="text/javascript"
    src="{{ env('GOOGLE_MAP_KEY') }}&libraries=places" >
    $(document).ready(function () {
    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();




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


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


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


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