Используем API Яндекс.Карт v 2.x в компоненте каталога SOBI2 для Joomla

На страницах своего блога, я не раз касался темы использования API карт в компоненте бизнес-каталога SOBI2, смотрите подробности здесь.

В этой заметке я расскажу, как можно использовать API Яндекс.Карт v 2.x в данном компоненте Joomla.

Карты используются в двух режимах: при добавлении информации о компании, чтобы указать местоположение; при просмотре полной информации.

В начале необходимо провести настройки компонента в административной части.

Создать или настроить два поля для хранения координат field_latitude (широта) и field_longitude (долгота).

В режиме администрирования системы нужно выбрать компонент Sigsiu Online Business Index 2

На открывшейся странице в левой колонке выбрать ссылку Параметры, а затем Параметры отображения.

На странице выбрать вкладку Google Maps.

Включить отображение Google Maps

Отображать Google Maps — Да

Теперь нужно изменить код файла entry.functions.php, который содержит функцию showGoogleMaps вывода карты при просмотре полного описания информации о компании.

В папке установки вашего сайта находим каталог по адресу /components/com_sobi2/includes/, а в нем нужный файл entry.functions.php.

Открываем его для редактирования.

Находим в нем функцию showGoogleMaps, предпоследняя в файле.

И заменяем весь код в функции между строчками

    function showGoogleMaps($mySobi, $config)
    {

и

    }
    function waySearchUrl( $waySearchLink )

На следующий:

 
		$title = $config->jsAddSlashes( $mySobi->title );
		$GeoPos = $config->getGeoPosition( $mySobi->id );
		//if( $GeoPos['lat'] && $GeoPos['long'] && is_numeric( $GeoPos['lat'] ) && is_numeric( $GeoPos['lat'] ) ) {
 
                //Добавленная строка    
                $fieldsObjects 	=& $mySobi->myFields;
 
			?>
 
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
 
    <script type="text/javascript">
        ymaps.ready(init);
 
        function init () {
 
		<?php
if( $GeoPos['lat'] && $GeoPos['long'] && is_numeric( $GeoPos['lat'] ) && is_numeric( $GeoPos['lat'] ) ) {
 
?>
 
            var myMap = new ymaps.Map("map", {
                    center: [<?php echo $GeoPos['lat'];?>, <?php echo $GeoPos['long'];?>],
                    zoom: 16
                });
 
                // Создаем метку и задаем изображение для ее иконки
            var myPlacemark = new ymaps.Placemark([<?php echo $GeoPos['lat'];?>, <?php echo $GeoPos['long'];?>], {
                    balloonContent: '<div style="text-align:center; width: 200px; "><strong><?php echo $mySobi->title;?></strong></div>'
                }, {
                    preset: "twirl#redIcon"
                });	
 
			myMap.geoObjects.add(myPlacemark);
			myPlacemark.balloon.open();
 
			myMap.controls.add("smallZoomControl").add("typeSelector").add("mapTools");	
 
 
<?php
}
else
{
?>				
 
			ymaps.geocode('<?php echo $fieldsObjects['field_city']->data; ?> <?php echo $fieldsObjects['field_street']->data; ?>', { results: 1 }).then(function (res) {
                // Выбираем первый результат геокодирования
                var firstGeoObject = res.geoObjects.get(0);
 
				var coords = firstGeoObject.geometry.getCoordinates();
 
                // Создаём карту.
                // Устанавливаем центр и коэффициент масштабирования.
                var myMap = new ymaps.Map("map", {
                    center: coords,
                    zoom: 16
                });
 
			var myPlacemark = new ymaps.Placemark(coords, {balloonContent: '<div style="text-align:center; width: 200px; "><strong><?php echo $mySobi->title;?></strong></div>'},{preset: "twirl#redIcon"});
 
			myMap.geoObjects.add(myPlacemark);
			myPlacemark.balloon.open();
 
			myMap.controls.add("smallZoomControl").add("typeSelector").add("mapTools");	
 
			});
 
	<?php }  ?>			
 
        }
    </script>
 
<div style="width: <?php echo $config->googleMapsWidth; ?>px; height: <?php echo $config->googleMapsHeight; ?>px;" id="map"></div>	
 
<?php

Сохраняем измененный файл

Как работает добавленный код.

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

Если координаты отсутствуют, то происходит геокодирование по адресу, результат отображается на карте.

Пример работы с заданными координатами

Пример работы с геокодированием

Чтобы было удобно указывать координаты при добавлении, нужно дать возможность пользователем указывать необходимое место на карте, а еще лучше автоматически определять координаты по адресу.

Для реализации этого я использовал плагин Google Maps Coordinates, заменив в нем карты Google на Яндекс.Карты.

Загружаем новую версию плагина.

Устанавливать его нужно не обычным способом, через менеджер расширений, а в режиме администрирования компонента SOBI2 меню Расширения -> Менеджер расширений.

Выбираем файл для установки и нажимаем кнопку «Установка».

После установки в том же меню Расширения появиться новый пункт Google Maps Coordinates.

Нажимаем его и переходим в настройки плагина.

Устанавливаем необходимые параметры.

Для использования плагина необходимо в шаблон формы добавления Form вставить в нужное место следующий код:

<?php $pluginsObjects['gmapscoords']->editFormStart(1, $fields);
echo $fields['gmapscoords_plugin']['field']; ?>

Переходим в меню Оформление -> Шаблон Form и добавляем код, напимер, сразу после поля field_city (Город).

Сохраняем изменения.

Теперь при добавлении информации об организации, после поля ввода города появилась строка с двумя ссылками

Получить координаты | Показать карту.

Последовательно заполняем поля формы, название, адрес, индекс, город.

После чего нажимаем на ссылку Получить координаты, введенные данные адреса и города гекодируются в пару координат, значения добавляются в поля Широта и Долгота.

Мы можем просмотреть результат геокодирования на карте, нажав на ссылку Показать карту.

В окне отображается карта с меткой, если метка находится не точно, мы можем передвинуть ее в нужное место.

Как только мы закончим перемещать метку, ее новые координаты автоматически сохраняются в полях Широта и Долгота.

Посмотреть пример в действии

Загрузить архив с новым файлам entry.functions.php и плагином Google Maps Coordinates.