Работа с Google Maps в Joomla 4.

  1. Введение в использование Google Map в Joomla 4
  2. Ключ API Google Map для сайта на Joomla 4
  3. XML-файл формы Joomla 4
  4. HTML для вывода Google Map на сайте с CMS Joomla 4
    1. Файл поля формы Joomla 4
    2. Редактирование файла вывода Google Map на сайте с CMS Joomla 4
  5. Javascript для вывода Google Map на сайте с CMS Joomla 4
  6. Результат вывода Google Map на сайте с CMS Joomla 4


Введение в использование Google Map в Joomla 4

Это решение реализовано в компоненте, который отображает такие события, как фестивали, олимпиады, чемпионаты и прочие собрания народа в одном месте, на карте мира. Каждому событию нужны данные о широте и долготе, чтобы вывести точку на карте мира. Это решение касается ввода данных для одного единичного события и не охватывает отображение нескольких событий на карте мира. Форма ввода данных содержит множество полей, разбросанных по семи вкладкам - здесь упоминаются только три поля, связанные с геокодированием. Вы можете посмотреть значения широты и долготы в API what3words, это может включать поиск местоположения для получения динамических подсказок.

Ключ API Google Map для сайта на Joomla 4

Ключ для использования сервиса Google Map каждый может получить, используя собственный аккаунт Google - вам могут понадобиться разные ключи для вашего сайта и среды разработки. В форме конфигурации компонента предусмотрен ключ:

	<fieldset name="apikey"
		label="COM_MYCOMPONENT_CONFIG_GOOGLE_MAPS_API_LABEL"
		description="COM_MYCOMPONENT_CONFIG_GOOGLE_MAPS_API_DESC">
		<field
			id="apikey"
			name="apikey"
			type="text"
			default=""
			size="50"
			label="MYCOMPONENT_CONFIG_GOOGLE_MAPS_API_KEY_LABEL"
			description="COM_MYCOMPONENT_CONFIG_GOOGLE_MAPS_API_KEY_DESC"
		/>
	</fieldset>

Это создаст вкладку формы с одним полем. Это позволит вводить ключ API Google для Google Map на странице конфигурации компонента, который и будет использоваться для работы с картами.

XML-файл формы Joomla 4

Форма ввода данных нуждается в пользовательском поле в файле XML-формы:

		<field 
			name="geocode_address" 
			type="geocode" 
			label="COM_MYCOMPONENT_CAMP_GEOCODE_ADDRESS_LABEL"
			description="COM_MYCOMPONENT_CAMP_GEOCODE_ADDRESS_DESC" 
			class=""
		/>
		<field 
			name="latitude" 
			type="text" 
			label="COM_COMPONENT_CAMP_LATITUDE_LABEL"
			description="COM_COMPONENT_CAMP_LATITUDE_DESC" 
			class="w-auto validate-numeric"
			size="32" 
		/>
		<field 
			name="longitude" 
			type="text" 
			label="COM_COMPONENT_CAMP_LONGITUDE_LABEL"
			description="COM_COMPONENT_CAMP_LONGITUDE_DESC" 
			class="w-auto validate-numeric"
			size="32" 
		/>

HTML для вывода Google Map на сайте с CMS Joomla 4

Файл поля формы Joomla 4

Файл поля пользовательской формы в src/Field/GeocodeField для создания кода, который отображается следующим образом:

<div class="input-group">
<input id="jform_geocode_address" value="" name="jform[geocode_address]" class="form-control w-auto me-2">
<input class="form-control w-auto me-2 readonly" id="country_name" type="text" readonly="readonly" value="Iceland">
<button class="btn btn-sm btn-info me-2" id="setLatLon" onclick="return false;">Вперед!</button>
<button id="previewmap" class="btn btn-sm btn-info" 
	data-bs-toggle="modal" 
	data-bs-target="#modal-box" 
	data-bs-title="Location Map" 
	data-bs-action="showLocationMap" 
	onclick="return false;">Предварительный просмотр</button>
</div>

Редактирование файла вывода Google Map на сайте с CMS Joomla 4

Ключ API Google Map должен быть передан в Javascript в файле редактирования:

// ближе к началу, перед ?>
$config = ComponentHelper::getParams('com_mycomponent');
$key = $config->get('apikey');

$uri = JURI::getInstance();
$scheme = $uri->getScheme();

// Зарегистрируйте и прикрепите пользовательский элемент
$wa->registerAndUseScript('gmap', $scheme . '://maps.googleapis.com/maps/api/js?key=' . $key . '&sensor=false', [], ['defer' => true]);

$wa->addInlineScript("
	var mapapikey = '{$key}';
");

...
<!-- ближе к концу -->
<?php include_once JPATH_COMPONENT . '/layouts/modalbox.php'; ?>

В форме ввода данных нажмите кнопку Go! (Вперёд!), чтобы сгенерировать значения широты и долготы, а затем кнопку Prewiev (Предварительный просмотр), чтобы проверить результаты:

В форме ввода данных нажмите кнопку Go! (Вперёд!), чтобы сгенерировать значения широты и долготы, а затем кнопку Prewiev (Предварительный просмотр), чтобы проверить результаты

Javascript для вывода Google Map на сайте с CMS Joomla 4

В Javascript есть две части. Первая часть вставляет значения широты и долготы для вывода точки на Google карте:

// ===== geocode =====

var mygeocode = document.getElementById('setLatLon');
mygeocode && mygeocode.addEventListener('click', function (event) {
	var country = document.getElementById('country_name').value;
	var address = document.getElementById('jform_geocode_address').value + ',' + country;
	var latitude = document.getElementById('jform_latitude');
	var longitude = document.getElementById('jform_longitude');
	var preview = document.getElementById('modal-box');
	geocoder = new google.maps.Geocoder();
	geocoder.geocode( { 'address': address }, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			latitude.value = results[0].geometry.location.lat();
			longitude.value = results[0].geometry.location.lng();
		} else {
			alert('Geocode was not successful for the following reason: ' + status);
		}
	});
});

И вторая часть Javascript показывает карту местоположения для пользователя, чтобы проверить, не было ли ужасной ошибки при вводе почтового адреса:

// ===== Покажите модальное поле и решите, что делать ===

var modalbox = document.getElementById("modal-box");
var modalSave = document.getElementById("modal-save");
if (modalbox) {
	var modalTitle = modalbox.querySelector('.modal-title');
	var modalBody = modalbox.querySelector('.modal-body');	
}

modalbox && modalbox.addEventListener('show.bs.modal', function (event) {
	// Кнопка, запускающая вывод модального окна
	let button = event.relatedTarget;
	// Извлечение информации из атрибутов data-bs-* 
	let title = button.getAttribute('data-bs-title');
	let action = button.getAttribute('data-bs-action');
	let item_id  = button.getAttribute('data-bs-id');
	modalTitle.textContent = title;
	// Очистка вывода в модальном окне.
	modalBody.textContent = 'Получение контента - Пожалуйста, ждите!';
	...
	if (action == 'showLocationMap') {
		modalSave.classList.add('hidden');
		let latitude = document.getElementById('jform_latitude');
		let longitude = document.getElementById('jform_longitude');
		let lat = latitude.value;
		let lon = longitude.value;
		if (lat == '0' && lon == '0') {
			alert('Пожалуйста, установите широту и долготу, а затем выберите кнопку предварительного просмотра!');
			var description = document.querySelector(".modal-body");
			description.innerHTML = 'Отображение карты прервано - пожалуйста, установите широту и долготу';
			return;
		}
		var url = `http://maps.googleapis.com/maps/api/staticmap?center=${lat},${lon}&zoom=5&size=200x200&maptype=hybrid&markers=color:green%7Clabel:C%7C${lat},${lon}&sensor=false&key=${mapapikey}`;
		var description = document.querySelector(".modal-body");
		description.innerHTML = '<div class="text-center"><img src="'+url+'"></div>';
	}
	...
}

Результат вывода Google Map на сайте с CMS Joomla 4

В результате получаем такое вот наведение на необходимую цель, используя Google Map на сайте с CMS Joomla 4:

наведение на необходимую цель, используя Google Map на сайте с CMS Joomla 4

Перевод с английского официальной документации Joomla 4:
https://docs.joomla.org/Joomla_4_Tips_and_Tricks:_Using_Google_Geocode

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)

Старт! Горячий старт на просторы интернета
Старт! Горячий старт на просторы интернета
Старт! Меню