Laravel에 Google Places 자동 완성 통합 가이드
- DDD원래의
- 2024-09-14 06:21:32263검색
Laravel에서 자동 완성 주소 기능을 설정하면 사용자 경험이 크게 향상될 수 있습니다. 이 가이드에서는 Google Places API를 사용하여 자동 완성 주소 기능을 통합하는 방법을 보여줍니다.
Laravel에서 자동 완성 주소 설정에 대한 단계별 가이드
요구사항
- 라라벨 프로젝트
- Google Places API 키
- jQuery와 JavaScript에 대한 기본 지식
1단계: Google Places API 키 설정
- Google Cloud Console을 방문하세요.
- 새 프로젝트를 만듭니다(또는 기존 프로젝트 사용).
- API 및 서비스 > 라이브러리에서 Places API를 검색하세요.
- Places API를 활성화하세요.
- 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 스크립트를 포함합니다.
<!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>
설명:
- 유형: ['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 Places Autocomplete가 성공적으로 통합되었습니다. 이제 사용자가 주소를 자동 완성하도록 허용하여 사용자 경험을 향상할 수 있으며 선택한 주소 좌표를 데이터베이스에 저장할 수 있는 옵션이 있습니다.
위 내용은 Laravel에 Google Places 자동 완성 통합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!