Google Places Autocomplete を Laravel に統合するためのガイド-PHPチュートリアル-php.cn

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

DDD

リリース： 2024-09-14 06:21:32

オリジナル

267 人が閲覧しました

Guide to Integrating Google Places Autocomplete in Laravel

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