Laravel 9 Google Autocomplete Address Integration Example

This is an immaculate Laravel Google autocomplete address tutorial, throughout this, you will see how to build Goggle Autocomplete address dynamically in laravel application using the profound Google Place API.

Google offers address autocomplete feature powered by places library on top of that it is backed by the Maps JavaScript API.

Implementation of type-ahead-search behaviour is possible with autocomplete that enhances the user experience it concurrently empowers the user engagement.

The autocomplete assistance can match full words and substrings, resolving place names, addresses, and zip codes. Applications can therefore send queries as the user types, to provide on-the-fly place predictions.

Will this tutorial help you make an autocomplete address field with google maps api? You heard it right in this tutorial you will learn to implement autocomplete address in laravel with Google Maps AI.

It gets the country, state, city, zip code, latitude most importantly longitude.

Laravel 9 Google Autocomplete Address Example

  • Step 1: Setting Up Laravel Environment
  • Step 2: Get Google Place API Key
  • Step 3: Construct New Controller
  • Step 4: Add Route
  • Step 5: Make Blade View
  • Step 6: Insert Google Autocomplete Adress Script
  • Step 7: Start Autocomplete Address App

Setting Up Laravel Environment

You must have a new laravel app installed on your system to build the desired app, hence run the below command to manifest a new laravel project.

However, you can ski this step if the task has already been done.

composer create-project --prefer-dist laravel/laravel laravel-demo-app

Get Google Place API Key

Go to cloud.google.com site, in here you need to register for acquiring the Google Place API key.

Construct New Controller

Further, you have to create a new controller using the below command:

php artisan make:controller GoogleAddressController

Next, open app/controllers/GoogleAddressController.php likewise update the file with the following code:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class GoogleAddressController extends Controller
{
    public function index()
    {
    	return view('welcome');
    }
}

Now, this controller is loaded with the index() method, and it will load the blade view file which will have the autocomplete address code.

Add Route

Further, head over to routes/web.php file similarly define a new route with GET method. Also, you have to import the GoogleAddressController at the top section.

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\GoogleAddressController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
*/

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

Make Blade View

In this step, first open and update the resources/views/welcome.blade.php file, Here you need to create the autocomplete address form:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Google Autocomplete Address in Laravel Example</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>
    <div class="container mt-5">
        <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="latitude_Area">
            <label>Latitude</label>
            <input type="text" id="latitude" name="latitude" class="form-control">
        </div>

        <div class="form-group" id="longtitude_Area">
            <label>Longitude</label>
            <input type="text" name="longitude" id="longitude" class="form-control">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</body>
</html>

Insert Google Autocomplete Adress Script

Look for closing body tag in your laravel view template, just above the body tag you need to insert the autocomplete address script:

 <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=Your_Google_Key=places&callback=initAutocomplete"></script>
 <script>
     $(document).ready(function () {
         $("#latitude_Area").addClass("d-none");
         $("#longtitude_Area").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());

             $("#latitude_Area").removeClass("d-none");
             $("#longtitude_Area").removeClass("d-none");
         });
     }
 </script>

Start Autocomplete Address App

After that, you can run the laravel development server using the following command:

php artisan serve

Eventually, time has come to test the app with the given below url:

http://127.0.0.1:8000/google-autocomplete-address

Conclusion

The laravel google address autocomplete tutorial is over, i hope you liked our intensive efforts.

You have been explained throughly to implement dynamic address autocomplete in laravel using the Google Place API.