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:
- Go to the Google Cloud Console.
- If you do not have a project, create one.
- Once you have a project, go to the APIs & Services Dashboard.
- Click on the “+ ENABLE APIS AND SERVICES” button and search for “Google Maps JavaScript API”.
- Click on the “ENABLE” button.
- Go to the Credentials page.
- Click on the “+ CREATE CREDENTIALS” button and select “API key”.
- 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:
GOOGLE_MAPS_API_KEY=your_api_key_here
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.
<?php
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">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 11 Google Places Autocomplete Address - Tutsmake.com</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<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 - Tutsmake.com</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">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Google Maps API Script -->
<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places"></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();
});
}
</script>
</body>
</html>
Step 7 – Test Application
Run php artisan serve command to start application server:
php artisan serve
Open your browser with http://localhost:8000/address:
http://localhost:8000/address
Conclusion
That’s it; We hope you have created an autocomplete application in Laravel 11 with the help of Google Places API.
