Laravel에 Google Places 자동 완성 통합 가이드-PHP 튜토리얼-php.cn

집

백엔드 개발

PHP 튜토리얼

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

Sep 14, 2024 am 06:21 AM

Guide to Integrating Google Places Autocomplete in Laravel

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

&lt;?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 스크립트를 포함합니다.

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Address Autocomplete&lt;/title&gt;

    &lt;!-- Add Bootstrap CSS for styling (optional) --&gt;
    &lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container mt-5"&gt;
    &lt;h2&gt;Autocomplete Address&lt;/h2&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="autocomplete"&gt;Address&lt;/label&gt;
        &lt;input type="text" id="autocomplete" class="form-control" placeholder="Enter your address"&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Google Places API --&gt;
&lt;script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&amp;libraries=places"&gt;&lt;/script&gt;

&lt;script&gt;
    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);
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

설명:

유형: ['geocode'] 제안은 지오코딩된 주소로 제한됩니다.
YOUR_GOOGLE_API_KEY를 생성한 실제 API 키로 바꾸세요.

5단계: Laravel 애플리케이션 실행

다음 명령을 실행하여 애플리케이션을 제공하세요.

php artisan serve

로그인 후 복사

브라우저에서 http://127.0.0.1:8000/autocomplete를 방문하시면 주소 입력란이 보일 것입니다. 주소를 입력하기 시작하면 Google Places API가 주소 제안을 제공합니다.

6단계: 선택한 주소 처리(선택 사항)

선택한 주소를 추가로 처리하려는 경우(예: 데이터베이스에 저장) 제출 옵션을 포함하도록 양식을 수정할 수 있습니다.

예를 들어 추가 양식 필드를 추가할 수 있습니다.

&lt;form method="POST" action="{{ route('storeAddress') }}"&gt;
    @csrf
    &lt;input type="hidden" id="latitude" name="latitude"&gt;
    &lt;input type="hidden" id="longitude" name="longitude"&gt;
    &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
&lt;/form&gt;

로그인 후 복사

위도와 경도를 캡처하도록 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-&gt;input('latitude');
    $longitude = $request-&gt;input('longitude');

    // Store the address in the database or perform other actions.

    return back()-&gt;with('success', 'Address stored successfully.');
}

로그인 후 복사

web.php에서 이 양식 제출을 위한 경로를 추가하세요.

Route::post('/store-address', [AddressController::class, 'storeAddress'])-&gt;name('storeAddress');

로그인 후 복사

결론

이 단계를 따르면 Laravel 애플리케이션에 Google Places Autocomplete가 성공적으로 통합되었습니다. 이제 사용자가 주소를 자동 완성하도록 허용하여 사용자 경험을 향상할 수 있으며 선택한 주소 좌표를 데이터베이스에 저장할 수 있는 옵션이 있습니다.

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.