Google Places Autocomplete を Laravel に統合するためのガイド
- DDDオリジナル
- 2024-09-14 06:21:32574ブラウズ
Laravel でオートコンプリート住所機能を設定すると、ユーザー エクスペリエンスが大幅に向上します。このガイドでは、Google Places API を使用してオートコンプリート住所機能を統合する方法を説明します。
Laravelでオートコンプリートアドレスを設定するためのステップバイステップガイド
要件
- Laravel プロジェクト。
- Google プレイス API キー。
- jQuery と JavaScript の基本的な知識。
ステップ 1: Google Places API キーを設定する
- Google Cloud コンソールにアクセスします。
- 新しいプロジェクトを作成します (または既存のプロジェクトを使用します)。
- API とサービス > に移動します。 Library に移動し、Places API を検索します。
- Places API を有効にします。
- API とサービス > に移動します。 Credentials を入力し、API キーを作成します。不正使用を避けるために、このキーを必ず制限してください。
ステップ 2: Laravel をインストールし、ルートを設定する
Laravel プロジェクトを作成します (まだ作成していない場合):
composer create-project --prefer-dist laravel/laravel address-autocomplete
コントローラーを作成します:
php artisan make:controller AddressController
次に、routes/web.php でルートを定義します。
Route::get('/autocomplete', [AddressController::class, 'index']);
ステップ 3: コントローラー ロジックを作成する
app/Http/Controllers/AddressController.php を開き、ビューを返すための次のロジックを追加します。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class AddressController extends Controller
{
public function index()
{
return view('autocomplete');
}
}
ステップ 4: オートコンプリート入力フィールドを使用してビューを作成する
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>
説明：
- types: ['geocode'] は、候補をジオコーディングされた住所に制限します。
- YOUR_GOOGLE_API_KEY を、生成した実際の API キーに置き換えます。
ステップ 5: Laravel アプリケーションを実行する
次のコマンドを実行してアプリケーションを提供します:
php artisan serve
ブラウザで http://127.0.0.1:8000/autocomplete にアクセスすると、アドレス入力フィールドが表示されるはずです。住所の入力を開始すると、Google Places API が住所の候補を表示します。
ステップ 6: 選択したアドレスを処理する (オプション)
選択したアドレスをさらに処理したい場合 (データベースに保存するなど)、フォームを変更して送信オプションを含めることができます。
たとえば、追加のフォームフィールドを追加できます:
<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();
});
ステップ 7: Store メソッドを作成する (オプション)
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 サイトの他の関連記事を参照してください。