Skip to content

All topics  /  Laravel

How to Google Autocomplete Address in Laravel 11?

Laravel ·

Teams applying “How to Google Autocomplete Address in Laravel 11?” in a production project can use the related Monitask article to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

How to Google Autocomplete Address in Laravel 11?

Hi, Dev

In this tutorial, we'll explore integrating Google Autocomplete for addresses into a Laravel 11 application using the Google Maps Places API.

Google Autocomplete Address is a functionality offered by Google Maps, a widely-used online mapping service. Its primary aim is to streamline and accelerate the address input process by predicting and offering address suggestions as users type into the search bar. When a user initiates typing in an address within the search bar on Google Maps or any other Google platform utilizing this feature, Google's algorithm immediately begins predicting and proposing potential addresses based on the entered text. These predictions appear in a dropdown menu below the search bar, allowing users to select from the suggestions or further refine their search by continuing to type.

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.

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');
    }
}

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>How to Google Autocomplete Address in Laravel 11?</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">How to Google Autocomplete Address in Laravel 11? - NiceSnippets.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:

http://localhost:8000/google-autocomplete

Preview:

More on this topic