CodeIgniter 4: Автозаполнение поля поиска мест с использованием Google Maps JavaScript API
![](/uploads/posts/2022-09/1662297476_codeigniter-4.webp)
В этой статье мы рассмотрим концепцию, т.е. автозаполнения поля поиска мест с использованием 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.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.