Laravel 8 Google Autocomplete Address Tutorial

In this tutorial you will learn about the Laravel 8 Google Autocomplete Address Tutorial and its application with practical example.

In this Laravel 8 Google Autocomplete Address Example Tutorial, I’ll show you how to integrate Address or location Autocomplete using Google Autocomplete in laravel 8. In this tutorial you will learn to implement google autocomplete in laravel 8. In this article I will guide you through the integration of google autocomplete in laravel.

Table Of Contents−

Google Autocomplete
Laravel 8 Google Autocomplete Address Tutorial

Google Autocomplete

Google autocomplete widget is used to display suggestions for places, address and location as soon as the user starts typing in the given input box.

In this laravel 8 google autocomplete tutorial I’ll demonstrate you step by step process to integrate google autocomplete in laravel 8 project. Please follow the instructions given below:

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 we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2 – Get Api Key From Google

Now, we need to get Google API key to enable the communication between client and Google server. Now follow the instructions given below to get Google API Key:

Visit Google Cloud Platform.
Click on the project dropdown at the top to create the project.

Click APIs & Services > Credentials.
Now, click on Create Credentials > API key.
Copy google API and store in some text file.

Now we need to enable few services, so click on Credentials > “Enable APIs and Services”, additionally enable “Maps JavaScript API” and “Places API” services.

Step 3 – Add Route.

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

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

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

Step 4 – Generate Controller by Command

Now, lets create a controller named GoogleController using command given below –

php artisan make:controller GoogleController

1	php artisan make:controller GoogleController

After successfully create controller go to app/controllers/GoogleController.php and put 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");
 
    }
}

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

Now, we will 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>

<!doctype html>

<head>

<title>Google Autocomplete Address Example</title>

</head>

<body>

<h5 class="card-title text-white"> Google Autocomplete Address</h5>

</div>

<label for="autocomplete"> Location/City/Address </label>

</div>

<label for="latitude"> Latitude </label>

</div>

<label for="latitude"> Longitude </label>

</div>

<button type="submit" class="btn btn-success"> Submit </button>

</div>

</body>

</html>

Add Autocomplete Script.

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

$(document).ready(function() {

$("#lat_area").addClass("d-none");

$("#long_area").addClass("d-none");

});

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

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

 http://localhost:8000/auto-complete

1	http://localhost:8000/auto-complete

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Google Autocomplete Address Tutorial

Google Autocomplete