Laravel 7 Google Address Autocomplete Tutorial

Laravel

205

Shubham Kushwah

11-08-2020


Laravel google address autocomplete. In this tutorial, i will show you how to use google address autocomplete script in laravel app for creating laravel google address autocomplete app.

Laravel Google Adress Autocomplete Without Map

Let's start from scratch to create laravel google address autocomplete address app, so follow the below given steps:

  • Install Laravel Application
  • Get Api Key From Google
  • Create Route
  • Generate Controller
  • Create Blade View
  • Add Autocomplete Script
  • Run Development Server

Step 1: Install Laravel Application

First of all, Open command prompt and run the following command to install/download laravel fresh web application in your system(server):

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

Step 2: Get Api Key From Google

In this step, create the autocomplete address app in google. So, just go to the link https://cloud.google.com and get the google API key.

Step 3: Create Route

Now, Navigate to /routes/web.php file and add the below routes into web.php file:

Route::get("google-address-autocomplete", "[email protected]");

Step 4: Create Controller

In this step, Create a controller name AutocompleteController. So you need to use the below command and create Controller :

php artisan make:controller AutocompleteController

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<?php

 

namespace App\Http\Controllers;

 

use Illuminate\Http\Request;

 

class AutocompleteController extends Controller

{

    // ---------------- [ Load View ] ----------------

    public function index(Request $request) {

 

        return view("auto-complete");

 

    }

}

Step 5: Create Blade view

In this step, Navigate to /resources/views folder and create one file name auto-complete.blade.php :

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

<!doctype html>

<html lang="en">

  <head>

    <title>Google Autocomplete Address Example - w3alert.com</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>

Step 6: Add Autocomplete Script

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

{{-- javascript code --}}

   <script src="https://maps.google.com/maps/api/js?key=AIzaSyDxTV3a6oL6vAaRookXxpiJhynuUpSccjY&amp;libraries=places&amp;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 7: Run Development Server

Now, run the following command to start development server. So open your terminal and run the following command:

 php artisan serve

Now we are ready to run our example so run bellow command to quick run.

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

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.