Google Places Autocomplete を Laravel に統合するためのガイド

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

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

要件

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

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

1. Google Cloud コンソールにアクセスします。
2. 新しいプロジェクトを作成します (または既存のプロジェクトを使用します)。
3. API とサービス > に移動します。 Library に移動し、Places API を検索します。
4. Places API を有効にします。
5. 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 スクリプトを含めます。

    <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">



<div class="container mt-5">
    <h2 id="Autocomplete-Address">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>

説明：

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

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

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

php artisan serve

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

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

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

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

@csrf Submit

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 サイトの他の関連記事を参照してください。