Laravel でオートコンプリート住所機能を設定すると、ユーザー エクスペリエンスが大幅に向上します。このガイドでは、Google Places API を使用してオートコンプリート住所機能を統合する方法を説明します。
Laravel プロジェクトを作成します (まだ作成していない場合):
composer create-project --prefer-dist laravel/laravel address-autocomplete
コントローラーを作成します:
php artisan make:controller AddressController
次に、routes/web.php でルートを定義します。
Route::get('/autocomplete', [AddressController::class, 'index']);
app/Http/Controllers/AddressController.php を開き、ビューを返すための次のロジックを追加します。
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class AddressController extends Controller { public function index() { return view('autocomplete'); } }
autocomplete.blade.php のビュー ファイルを resource/views ディレクトリに作成します。
touch resources/views/autocomplete.blade.php
autocomplete.blade.php に、HTML フォームと Google Places API スクリプトを含めます。
<!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>
次のコマンドを実行してアプリケーションを提供します:
php artisan serve
ブラウザで http://127.0.0.1:8000/autocomplete にアクセスすると、アドレス入力フィールドが表示されるはずです。住所の入力を開始すると、Google Places API が住所の候補を表示します。
選択したアドレスをさらに処理したい場合 (データベースに保存するなど)、フォームを変更して送信オプションを含めることができます。
たとえば、追加のフォームフィールドを追加できます:
<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>
JavaScript を変更して緯度と経度を取得します。
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(); });
AddressController で、送信されたアドレスを保存するメソッドを作成します。
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.'); }
このフォーム送信のルートを web.php に追加します:
Route::post('/store-address', [AddressController::class, 'storeAddress'])->name('storeAddress');
これらの手順に従うことで、Laravel アプリケーションに Google プレイス オートコンプリートが正常に統合されました。ユーザーが住所をオートコンプリートできるようにすることでユーザー エクスペリエンスを向上させることができ、選択した住所座標をデータベースに保存するオプションも利用できるようになりました。
以上がGoogle Places Autocomplete を Laravel に統合するためのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。