Laravel 7/6 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 7/6. you will learn laravel 7/6 google autocomplete address tutorial. i explained simply about google autocomplete address example in laravel 7/6. So, let's follow few step to create example of autocomplete address example using google place api in laravel 7/6.

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

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 7/6 Application

We are going from scratch, So we require to get fresh Laravel application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

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

following path:/routes/web.php

 
Route::get('autocomplete','[email protected]');

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

following 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 lang="en"> 
  <head> 
    <title>Laravel 7/6 Google Autocomplete Address Tutorial - </title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" target="_blank" rel="nofollow"  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script> 
  </head> 
  <body class="bg-dark"> 
    <div class="container mt-5"> 
        <div class="row"> 
            <div class="col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12 m-auto"> 
                <div class="card shadow"> 
                    <div class="card-header"> 
                        <h5 class="card-title"> Laravel 7/6 Google Autocomplete Address Tutorial - </h5> 
                    </div> 
                    <div class="card-body"> 
                        <div class="form-group"> 
                            <label for="autocomplete"> Location/City/Address </label> 
                            <input type="text" name="autocomplete" id="autocomplete" class="form-control" placeholder="Select Location"> 
                        </div> 
                        <div class="form-group" id="lat_area"> 
                            <label for="latitude"> Latitude </label> 
                            <input type="text" name="latitude" id="latitude" class="form-control"> 
                        </div> 
 
                        <div class="form-group" id="long_area"> 
                            <label for="latitude"> Longitude </label> 
                            <input type="text" name="longitude" id="longitude" class="form-control"> 
                        </div> 
                    </div> 
                    <div class="card-footer"> 
                        <button type="submit" class="btn btn-success"> Submit </button> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
  </body> 
</html>

Add Google Autocomplete Address Script

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 
{{-- javascript code --}} 
<script src="https://maps.google.com/maps/api/js?key=Your_Google_Key=places&callback=initAutocomplete" type="text/javascript"></script> 
<script> 
   $(document).ready(function() { 
        $("#lat_area").addClass("d-none"); 
        $("#long_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()); 
           $("#lat_area").removeClass("d-none"); 
           $("#long_area").removeClass("d-none"); 
       }); 
   } 
</script>