Laravel에 Google Places 자동 완성 통합 가이드

Laravel에서 자동 완성 주소 기능을 설정하면 사용자 경험이 크게 향상될 수 있습니다. 이 가이드에서는 Google Places API를 사용하여 자동 완성 주소 기능을 통합하는 방법을 보여줍니다.

Laravel에서 자동 완성 주소 설정에 대한 단계별 가이드

요구사항

1. 라라벨 프로젝트
2. Google Places API 키
3. jQuery와 JavaScript에 대한 기본 지식

1단계: Google Places API 키 설정

1. Google Cloud Console을 방문하세요.
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를 열고 뷰 반환을 위해 다음 로직을 추가하세요.

<?php namespace App\Http\Controllers;

use Illuminate\Http\Request;

class AddressController extends Controller
{
    public function index()
    {
        return view('autocomplete');
    }
}

4단계: 자동 완성 입력 필드가 있는 뷰 만들기

resources/views 디렉터리에 autocomplete.blade.php에 대한 보기 파일을 만듭니다.

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>

설명:

• 유형: ['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 Places Autocomplete가 성공적으로 통합되었습니다. 이제 사용자가 주소를 자동 완성하도록 허용하여 사용자 경험을 향상할 수 있으며 선택한 주소 좌표를 데이터베이스에 저장할 수 있는 옵션이 있습니다.

위 내용은 Laravel에 Google Places 자동 완성 통합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!