Laravel Google Autocomplete Address Tutorial

Hi Guys

Here, i will show you google autocomplete address in laravel. we will help you to give example of google autocomplete address api key using in laravel. you will learn laravel google autocomplete address tutorial. i explained simply about google autocomplete address example in laravel. So, let's follow few step to create example of autocomplete address example using google place api in laravel.

In this tutorial, I will explain How to create google autocomplete address in laravel, we will show autocomplete address using google api in laravel.i will easy examplain of google autocomplete address in laravel.

I will create autocomplete address for Palce API in google. we will show step by step example of google autocomplete address. We can make a custom list of addresses and store it to the database. Then according to the requirement, we can use it for the purpose of autocomplete. This concept is much simple if we have a low set of data. But what, if you have to search in a geographical area such as a country or outside our country.

Here example of google autocomplete address in laravel

Step 1: Install Laravel

This is optional; however, if you have not created the laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step:2 Get Google Place API Key

Now In this step ,the autocomplete address for get google place api key. we’ll have to get the key. So, just go to the link cloud.google.com/ and follow the below steps for getting the API key.

After,Google provides a free API key for the developer for the demo. So, I am just going the use it. In the below image you will have an option in the top right corner named Console.

It will redirect you to the below result. In this result, you will be showing the product list provided by the Google Cloud Platform.

List of Services By Google Cloud Platform

Now, we have to select the Places API from the list. So, just click on the Places API. Now, you will be redirected to the description of this API.

Here, we will have to enable this API service. So, that we can use it for development purposes. Once, it will enable, you can use all the services related under the Place API.

Places API

In the next step, you will have to create an API key for the place autocomplete. So, under the menu section, just click on the APIs tab as shown you in the below result.

Create API Key For Place Autocomplete

Step:3 Create Route

In this is step we need to create route for google autocomplete address layout file

/routes/web.php

<?php

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

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('autocomplete',[AutocompleteController::class,'locationAutoComplete']);

Step:4 Create Controller

here this step now we should create new controller as AutocompleteController,So run bellow command for generate new controller

php artisan make:controller AutocompleteController

now this step, this controller will manage google autocomplete address layout bellow content in controller file.following fille path

/app/Http/Controllers/AutocompleteController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class AutocompleteController extends Controller
{
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Contracts\Support\Renderable
     */
    public function locationAutoComplete()
    {
        return view('autocomplete');
    }
}

Step 5: Create Blade Files

In Last step, let's create autocomplete.blade.php (resources/views/autocomplete.blade.php) for layout and lists all google autocomplete address code here and put following code

following path:/resources/views/autocomplete.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <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" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style type="text/css">
        body
        {
            background-color: #74b1819c;
        }
    </style>
</head>
<body>
    <div class="container mt-5 pt-5">
        <div class="row d-flex justify-content-center mt-3">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header text-center">
                        <h3>Laravel Google Autocomplete Address Example</h3>
                    </div>
                    <div class="card-body">
                        <div class="my-3">
                            <label for="autocomplete"> Location/City/Address :<span class="text-danger">*</span></label>
                            <input type="text" name="autocomplete" id="autocomplete" class="form-control" placeholder="Enter 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>
                    </div>
                    <div class="card-footer">
                        <div class="mt-3 text-center">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </div>                
            </div>
        </div>
    </div>  
</body>
</html>

Add Google Autocomplete Address Script

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=Your_Google_Key&libraries=places" ></script>

<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>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/autocomplete

It will help you...