Setting up an autocomplete address feature in Laravel can significantly improve the user experience. This guide will show you how to integrate an autocomplete address functionality using the Google Places API.
Step-by-Step Guide to Setting Up Autocomplete Address in Laravel
Requirements
- A Laravel project.
- Google Places API key.
- Basic knowledge of jQuery and JavaScript.
Step 1: Set Up a Google Places API Key
- Visit the Google Cloud Console.
- Create a new project (or use an existing one).
- Navigate to APIs & Services > Library, and search for the Places API.
- Enable the Places API.
- Go to APIs & Services > Credentials and create an API key. Make sure to restrict this key to avoid unauthorized usage.
Step 2: Install Laravel and Set Up Routes
Create a Laravel project (if you haven’t already):
composer create-project --prefer-dist laravel/laravel address-autocomplete
Create a controller:
php artisan make:controller AddressController
Now, define a route in routes/web.php:
Route::get('/autocomplete', [AddressController::class, 'index']);
Step 3: Create the Controller Logic
Open app/Http/Controllers/AddressController.php and add the following logic for returning the view:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class AddressController extends Controller
{
public function index()
{
return view('autocomplete');
}
}
Step 4: Create the View with Autocomplete Input Field
Create the view file for autocomplete.blade.php in the resources/views directory:
touch resources/views/autocomplete.blade.php
In the autocomplete.blade.php, include the HTML form and Google Places API script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Address Autocomplete</title>
<!-- Add Bootstrap CSS for styling (optional) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2>Autocomplete Address</h2>
<div class="form-group">
<label for="autocomplete">Address</label>
<input type="text" id="autocomplete" class="form-control" placeholder="Enter your address">
</div>
</div>
<!-- Google Places API -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&libraries=places"></script>
<script>
function initialize() {
var input = document.getElementById('autocomplete');
var options = {
types: ['geocode'], // Restrict results to addresses
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
Explanation:
-
types: ['geocode']limits the suggestions to geocoded addresses. - Replace
YOUR_GOOGLE_API_KEYwith the actual API key you generated.
Step 5: Run the Laravel Application
Run the following command to serve the application:
php artisan serve
Visit http://127.0.0.1:8000/autocomplete in your browser, and you should see an address input field. Start typing an address, and Google Places API will provide address suggestions.
Step 6: Handle the Selected Address (Optional)
If you want to handle the selected address further (e.g., store it in a database), you can modify the form to include a submission option.
For example, you can add an additional form field:
<form method="POST" action="{{ route('storeAddress') }}">
@csrf
<input type="hidden" id="latitude" name="latitude">
<input type="hidden" id="longitude" name="longitude">
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Modify your JavaScript to capture the latitude and longitude:
var autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
document.getElementById('latitude').value = place.geometry.location.lat();
document.getElementById('longitude').value = place.geometry.location.lng();
});
Step 7: Create the Store Method (Optional)
In your AddressController, create a method to store the submitted address:
public function storeAddress(Request $request)
{
$latitude = $request->input('latitude');
$longitude = $request->input('longitude');
// Store the address in the database or perform other actions.
return back()->with('success', 'Address stored successfully.');
}
Add a route for this form submission in web.php:
Route::post('/store-address', [AddressController::class, 'storeAddress'])->name('storeAddress');
Conclusion
By following these steps, you have successfully integrated Google Places Autocomplete in your Laravel application. You can now enhance user experience by allowing users to autocomplete addresses, and you have the option to store the chosen address coordinates in your database.
Top comments (0)