Laravel 9: Как создать веб-приложение для автозаполнения адреса Google с помощью API-интерфейсов Google Address

22/06/2022 19:30

В этом руководстве вы узнаете, как создать веб-приложение для автозаполнения адреса Google с помощью API-интерфейсов Google Address в приложении laravel 9.

Обратите внимание, что API автозаполнения адреса Google будет возвращать адрес, а также широту, долготу, код места, штат, город, страну и т. д. Используя широту и долготу адреса, вы можете динамически отображать местоположение маркеров на карте Google в laravel.

Laravel 9 Автозаполнение Google Place Адрес города, района и страны

Используйте следующие шаги, чтобы реализовать автозаполнение мест или адресов Google в приложениях laravel 9:

Шаг 1 - Установите приложение Laravel 9

Прежде всего, выполните следующую команду в терминале, чтобы установить/загрузить приложение laravel 9 в вашей системе (на сервере):

composer create-project --prefer-dist laravel/laravel blog

Шаг 2 - Получите ключ API от Google

Для реализации адреса автозаполнения в laravel нам нужно получить ключ. Итак, просто перейдите по ссылке https://cloud.google.com и получите ключ API Google.

Шаг 3 – Добавьте маршрут

На этом шаге добавьте маршруты в файл web.php. Перейдите в файл app/routes/web.php и следуйте маршрутам в файле web.php:

use App\Http\Controllers\GoogleController;
Route::get('auto-complete', [GoogleController::class, 'index']);

Шаг 4 - Генерация контроллера по команде

На этом шаге выполните следующую команду в терминале, чтобы создать имя контроллера GoogleController. Итак, вам нужно использовать приведенную ниже команду и создать контроллер:

php artisan make:controller GoogleController

После успешного создания контроллера перейдите в app/controllers/GoogleController.php и обновите следующий код:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class GoogleController extends Controller
{
    // ---------------- [ Load View ] ----------------
    public function index(Request $request) {
 
        return view("auto-complete");
 
    }
}

Шаг 5 - Создайте представление Blade

На этом шаге создайте файл представления blade. Перейдите в app/resources/views и создайте один файл с именем auto-complete.blade.php:

<!doctype html>
<html lang="en">

<head>
    <title>Laravel 9 Google Autocomplete Address Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12 m-auto">
                <div class="card shadow">
                    <div class="card-header bg-primary">
                        <h5 class="card-title text-white">Laravel 9 Google Autocomplete Address</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="autocomplete"> Location/City/Address </label>
                            <input type="text" name="autocomplete" id="autocomplete" class="form-control"
                                placeholder="Select Location">
                        </div>
                        <div class="form-group" id="lat_area">
                            <label for="latitude"> Latitude </label>
                            <input type="text" name="latitude" id="latitude" class="form-control">
                        </div>
                        <div class="form-group" id="long_area">
                            <label for="latitude"> Longitude </label>
                            <input type="text" name="longitude" id="longitude" class="form-control">
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-success"> Submit </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

</html>

Добавьте скрипт автозаполнения

Итак, в разделе нижней части страницы (footer) перед закрытием тега body просто добавьте туда приведенный ниже скрипт.

{{-- jаvascript code --}}
<script
    src="https://maps.google.com/maps/api/js?key=AIzaSyDxTV3a6oL6vAaRookXxpiJhynuUpSccjY&libraries=places&callback=initAutocomplete"
    type="text/jаvascript"></script>
<script>
    $(document).ready(function () {
        $("#lat_area").addClass("d-none");
        $("#long_area").addClass("d-none");
    });
</script>
<script>
    google.maps.event.addDomListener(window, 'load', initialize);

    function initialize() {
        var input = document.getElementById('autocomplete');
        var autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.addListener('place_changed', function () {
            var place = autocomplete.getPlace();
            $('#latitude').val(place.geometry['location'].lat());
            $('#longitude').val(place.geometry['location'].lng());
            // --------- show lat and long ---------------
            $("#lat_area").removeClass("d-none");
            $("#long_area").removeClass("d-none");
        });
    }
</script>

Шаг 6 - Запуск сервера разработки

На этом шаге выполните следующую команду в терминале, чтобы запустить сервер разработки. Используйте команду php artisan serve и запустите ваш сервер:

php artisan serve

# Если вы хотите запустить проект с другим портом, используйте следующую команду 
php artisan serve --port=8080

Шаг 7 - Протестируйте это приложение

Откройте браузер и введите в него следующий url:

http://localhost:8000/auto-complete

Вывод

В этом руководстве по автозаполнению google place в laravel вы узнали, как реализовать веб-приложение автозаполнения google с использованием API google place в laravel 9.

Laravel

0 + 0 -

MakeCodes
0
366