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

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

요구사항

1. Laravel 프로젝트입니다.
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를 열고 뷰를 반환하기 위한 다음 로직을 추가하세요.

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


resources/views 디렉토리에 autocomplete.blade.php에 대한 보기 파일을 생성합니다:


touch resources/views/autocomplete.blade.php




autocomplete.blade.php에 HTML 양식과 Google Places API 스크립트를 포함합니다.




    

    
Autocomplete Address
    

        Address
        








  
  
  설명:

• 유형: ['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단계: 저장 방법 생성(선택 사항)

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