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.
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']);
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');
}
}
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>
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.
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();
});
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');
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.
以上是Guide to Integrating Google Places Autocomplete in Laravel的详细内容。更多信息请关注PHP中文网其他相关文章！
