CodeIgniter 4: Автозаполнение поля поиска мест с использованием Google Maps JavaScript API

04/09/2022 16:18

В этой статье мы рассмотрим концепцию, т.е. автозаполнения поля поиска мест с использованием Google Maps jаvascript API в CodeIgniter 4.

Если вы ищете решение, как использовать Google Places API для создания строки автозаполнения для поиска мест, то эта статья поможет вам в этом. Руководство очень простое для понимания и внедрения в ваш код.

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

Давайте начнем.

Установка CodeIgniter 4

Для установки CodeIgniter 4 выполните следующую команду в терминале. Убедитесь, что composer у вас должен быть установлен.

$ composer create-project codeigniter4/appstarter codeigniter-4

Предположим, что вы успешно установили приложение в свою локальную систему.

Настройка .env

Когда мы установим CodeIgniter 4, у нас будет файл env в корне проекта. Чтобы использовать переменные окружения, то есть использовать переменные в глобальной области видимости, нам нужно переименовать env в .env.

Либо мы можем сделать это через переименование файла. Также это можно сделать с помощью команды терминала.

Откройте проект в терминале

$ cp env .env

Вышеприведенная команда создаст копию файла env в файл .env.

Теперь мы готовы использовать переменные среды.

Включите режим разработки

CodeIgniter по умолчанию запускается в режиме production. Вам необходимо перевести его в режим development, чтобы увидеть любую ошибку, если вы работаете с приложением.

Откройте файл .env в корневой папки.

Найдите:

# CI_ENVIRONMENT = production

Измените на:

CI_ENVIRONMENT = development

Теперь приложение находится в режиме разработки.

Начало работы с ключом API Google Map

Прежде чем использовать библиотеку Places в Maps jаvascript API, сначала необходимо убедиться, что Places API включен в Google Cloud Console, в том же проекте, который вы настроили для Maps jаvascript API.

Чтобы просмотреть список включенных API:

Перейдите в Google Cloud Console.
Нажмите кнопку Выбрать проект, затем выберите тот же проект, который вы настроили для API Maps jаvascript, и нажмите кнопку Открыть.
В списке API на приборной панели найдите API Places.
Если вы видите API в списке, все готово. Если API отсутствует в списке, включите его:
- В верхней части страницы выберите ENABLE API, чтобы отобразить вкладку Library. Или же в левом боковом меню выберите Library (Библиотека).
- Найдите API Places и выберите его в списке результатов.
- Выберите ENABLE (Разрешить). После завершения процесса Places API появится в списке API в панели управления.

Ключ API карты будет выглядеть следующим образом:

AIzaxxxXSQRl-XLDybXXX9cBcNtoZ1HXXxXxxXX

Создайте контроллер

Откройте проект в терминале и выполните эту команду для создания файла контроллера.

$ php spark make:controller PlaceController

Команда создаст файл PlaceController.php внутри папки /app/Controllers.

Откройте этот файл контроллера и запишите в него этот код.

PlaceController.php

<?php

namespace App\Controllers;

use App\Controllers\BaseController;

class PlaceController extends BaseController
{
	public function index()
	{
		return view("autocomplete-places");
	}
}

Создание шаблона представления

Далее, создайте файл autocomplete-places.php внутри папки /app/Views. Откройте этот файл представления и запишите в него следующий код.

autocomplete-places.php

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

<head>
    <title>CodeIgniter 4 Autocomplete Places Search Box using Google Maps jаvascript API</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-10 col-lg-10 col-md-10 col-sm-12 col-12 m-auto">
                <div class="card shadow">
                    <div class="card-header bg-primary">
                        <h5 class="card-title text-white">CodeIgniter 4 Autocomplete Places Search Box using Google Maps jаvascript API</h5>
                    </div>

                    <div class="card-body">
                        <div class="form-group">
                            <label for="autocomplete"> Location </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>
            </div>
        </div>
    </div>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://maps.google.com/maps/api/js?key=AIzaxxxXSQRl-XLDybXXX9cBcNtoZ1HXXxXxxXX&libraries=places&callback=initAutocomplete" type="text/jаvascript"></script>
    <script src="<?php echo base_url('map.js') ?>"></script>
</body>

</html>

При загрузке страницы будет вызвана функция initAutocomplete().

<script src="https://maps.google.com/maps/api/js?key=AIzaxxxXSQRl-XLDybXXX9cBcNtoZ1HXXxXxxXX&libraries=places&callback=initAutocomplete" type="text/jаvascript"></script>

Создайте файл 'map.js'

Создайте файл map.js в папке /public. Внутри этого файла мы напишем код для настроек карты.

Откройте файл map.js и запишите в него этот код.

map.js

$(document).ready(function() {
    $("#lat_area").addClass("d-none");
    $("#long_area").addClass("d-none");
});

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());

        // --------- показать широту и долготу ---------------
        $("#lat_area").removeClass("d-none");
        $("#long_area").removeClass("d-none");
    });
}

Добавьте маршрут

Откройте файл Routes.php из папки /Config. Добавьте в него этот маршрут.

Routes.php

$routes->get("locations", "PlaceController::index");

Тестирование

Запустите сервер разработки:

$ php spark serve

URL: http://localhost:8080/locations

При поиске и нажатии на любое местоположение вы получите широту и долготу выбранного места.

Надеемся, что эта статья помогла вам очень подробно изучить автозаполнение поля поиска мест с использованием Google Maps jаvascript API в CodeIgniter 4.

Codeigniter

0 + 0 -

MakeCodes
0
425