Laravel でオートコンプリート住所機能をセットアップすると、ユーザー エクスペリエンスが大幅に向上します。このガイドでは、Google Places API を使用してオートコンプリート住所機能を統合する方法を説明します。

Laravelでオートコンプリートアドレスを設定するためのステップバイステップガイド

要件

1. Laravel プロジェクト。
2. Google プレイス API キー。
3. jQuery と JavaScript の基本的な知識。

ステップ 1: Google Places API キーを設定する

1. Google Cloud コンソールにアクセスします。
2. 新しいプロジェクトを作成します (または既存のプロジェクトを使用します)。
3. API とサービス > ライブラリに移動し、Places APIを検索します。
4. Places APIを有効にします。
5. API とサービス > 認証情報 に移動し、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 を開き、ビューを返す次のロジックを追加します。

  
  
  ステップ 4: オートコンプリート入力フィールドを使用してビューを作成する


autocomplete.blade.php のビュー ファイルを resource/views ディレクトリに作成します:



touch resources/views/autocomplete.blade.php




autocomplete.blade.php に、HTML フォームと Google Places API スクリプトを含めます:





    
    
    

    
    




    
Autocomplete Address
    

        Address
        
    














  
  
  説明：

• types: ['geocode'] は、候補をジオコーディングされた住所に制限します。
• YOUR_GOOGLE_API_KEY を、生成した実際の API キーに置き換えます。

ステップ 5: Laravel アプリケーションを実行する

次のコマンドを実行してアプリケーションを提供します:

php artisan serve

ブラウザで http://127.0.0.1:8000/autocomplete にアクセスすると、アドレス入力フィールドが表示されます。住所の入力を開始すると、Google Places API が住所の候補を表示します。

ステップ 6: 選択したアドレスを処理する (オプション)

選択したアドレスをさらに処理したい場合 (データベースに保存するなど)、フォームを変更して送信オプションを含めることができます。

たとえば、追加のフォーム フィールドを追加できます:

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 プレイス オートコンプリートが正常に統合されました。ユーザーが住所をオートコンプリートできるようにすることで、ユーザー エクスペリエンスを向上できるようになりました。また、選択した住所座標をデータベースに保存するオプションも追加されました。