Laravel 11 Google Autocomplete Address Example

Laravel 11 Google Autocomplete Address Example

In Laravel 11, Google Places Autocomplete API provides you address with latitude, longitude, country, state, city, and postal code, etc. When the user types an address in the search input field of the form

In the example guide, we will teach you how to autocomplete addresses using Google Places API in Laravel 11. Also will teach how to get the Google API key from Google Cloud for Autocomplete Address project.

Steps on Laravel 11 Google Autocomplete Places Address Example

Here are:

Step 1 – Download New Laravel Application

Run the following composer command to download new laravel application setup into your server:

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

Step 2 – Set up a Google Cloud Project and Enable APIs

Open google cloud and create a project in it to enable and get apis key for places autocomplete by using the following steps:

  1. Go to the Google Cloud Console.
  2. If you do not have a project, create one.
  3. Once you have a project, go to the APIs & Services Dashboard.
  4. Click on the “+ ENABLE APIS AND SERVICES” button and search for “Google Maps JavaScript API”.
  5. Click on the “ENABLE” button.
  6. Go to the Credentials page.
  7. Click on the “+ CREATE CREDENTIALS” button and select “API key”.
  8. Copy the API key generated.

Step 3 – Configure Google Api Key

Open .env file file and add google API key in it; something like this:


Step 4 – Create Controller File

Create a new controller file which is used to handle autocomplete logic in it:

php artisan make:controller AddressController

Edit the AddressController.php from app/http/controllers folder to include methods for displaying the view with handling autocomplete requests.


namespace App\Http\Controllers;

use Illuminate\Http\Request;

class AddressController extends Controller
public function index()
return view('address');

Step 5 – Define Routes

Define routes to handle address autocomplete address requests in routes/web.php; something like this:

use App\Http\Controllers\AddressController;
Route::get('address', [AddressController::class, 'index']);

Step 6 – Create Google Autocomplete Form

Create address.blade.php file in app/resources/views folder and then make place autocomplete form in it; something like this:

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 11 Google Places Autocomplete Address -</title>
<!-- Bootstrap CSS -->
<link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<h5 class="card-title">Laravel 11 Google Places Autocomplete Address Example -</h5>
<div class="form-group">
<label for="autocomplete" class="form-label">Enter your address</label>
<input id="autocomplete" class="form-control" type="text" placeholder="Enter your address">
<!-- Google Maps API Script -->

<script src="{{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places"></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();


Step 7 – Test Application

Run php artisan serve command to start application server:

php artisan serve

Open your browser with http://localhost:8000/address:



That’s it; We hope you have created an autocomplete application in Laravel 11 with the help of Google Places API.

Recommended Guides


Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of 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.

Leave a Reply

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