Laravel 8 Google Autocomplete Address Tutorial

Laravel 8 Google Autocomplete Address Tutorial

Laravel 8 google address autocompletes without showing the map. In this tutorial, you will learn how to create a google autocomplete address web app using google address APIs in laravel 8 app.

Note that, Google autocomplete address API will return address and as well as latitude, longitude, place code, state, city, country, etc. Using latitude and longitude of address, you can show markers location in google map dynamically in laravel.

This tutorial guide to you step by step how to implement google places autocomplete address web application without showing google maps in laravel.

Google Place Autocomplete City, District & Country Address In Laravel 8

  • Step 1 – Install Laravel 8 App
  • Step 2 – Get Api Key From Google
  • Step 3 – Add Route
  • Step 4 – Generate Controller by Command
  • Step 5 – Create Blade View
  • Step 6 – Run Development Server
  • Step 7 – Test This App

Step 1 – Install Laravel 8 App

First of all, Execute the following command on the terminal to install/download laravel 8 application in your system(server):

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

Step 2 – Get Api Key From Google

For implementing the autocomplete address in laravel, we’ll have to get the key. So, just go to the link https://cloud.google.com and get the google API key.

Step 3 – Add Route

In this step, add routes in the web.php file. Go to app/routes/web.php file and following routes in web.php file:

use App\Http\Controllers\GoogleController;
Route::get('auto-complete', [GoogleController::class, 'index']);

Step 4 – Generate Controller by Command

In this step, execute the following command on terminal to create a controller name GoogleController. So you need to use the below command and create Controller :

php artisan make:controller GoogleController

After successfully create controller go to app/controllers/GoogleController.php and update the following code :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class GoogleController extends Controller
{
    // ---------------- [ Load View ] ----------------
    public function index(Request $request) {

        return view("auto-complete");

    }
}

Step 5 – Create Blade view

In this step, create a blade view file. Go to app/resources/views and create one file name auto-complete.blade.php :

<!doctype html>
<html lang="en">
  <head>
    <title>Google Autocomplete Address Example</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" 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>
    <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 bg-primary">
                        <h5 class="card-title text-white"> Google Autocomplete Address</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>
    <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>
  </body>
</html>

Add Autocomplete Script

So, in the footer section before closing the body tag, just add the below script there.

{{-- javascript code --}}
   <script src="https://maps.google.com/maps/api/js?key=AIzaSyDxTV3a6oL6vAaRookXxpiJhynuUpSccjY&libraries=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());

            // --------- show lat and long ---------------
               $("#lat_area").removeClass("d-none");
               $("#long_area").removeClass("d-none");
           });
       }
    </script>

Step 6 – Run Development Server

In this step, execute the following command on the terminal to start development server. Use the php artisan serve command and start your server :

 php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080

Step 7 – Test This App

Open your browser and hit the following url on it:

 http://localhost:8000/auto-complete

Conclusion

In this google place autocomplete in laravel tutorial, you have learned how to implement google autocomplete web application using google place APIs in laravel.

Recommended Laravel Posts

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

One reply to Laravel 8 Google Autocomplete Address Tutorial

  1. Hi Devendra,
    Thank you for this code

Leave a Reply

Your email address will not be published. Required fields are marked *