Использование Народной карты в компоненте SOBI2 для Joomla 1.5.

Автор: | 13.03.2011
17 комментариев

На своем блоге я не раз писал о доработке компонента универсального каталога SOBI2 для Joomla 1.5.

В частности, как заменить в компоненте SOBI2 карты Google Maps на Яндекс.Карты.

В этой заметке я расскажу о том, как использовать Народную карту в компоненте SOBI2 для Joomla 1.5

И так у Вас на сайте уже установлен компонент SOBI2, если нет загрузить его можно здесь и файлы для русификации здесь.

С начала нам необходимо заменить карты Google Maps на Яндекс.Карты.

Для этого необходимо отредактировать файл entry.functions.php, который находиться по адресу:

<папка установки Joomla>/components/com_sobi2/ncludes/.

В этом файле найти функцию showGoogleMaps и заменить полностью ее код от строки

function showGoogleMaps($mySobi, $config)
{

до строки

</script> включая ее,

кодом:

if( !$config->useGoogleMaps || !isset( $config->googleMapsApiKey ) ) {
			return null;
		}
 
		$title = $config->jsAddSlashes( $mySobi->title );
		$GeoPos = $config->getGeoPosition( $mySobi->id );
		if( $GeoPos['lat'] && $GeoPos['long'] && is_numeric( $GeoPos['lat'] ) && is_numeric( $GeoPos['lat'] ) ) {
 
		<div style="width: <?php echo $config->googleMapsWidth; ?>px; height: <?php echo $config->googleMapsHeight; ?>px;" id="sobi2GoogleMaps"></div>
<script src="<?php echo 'http://api-maps.yandex.ru/1.1/index.xml?key=', $config->googleMapsApiKey; ?>" type="text/javascript"></script>
 
<script type="text/javascript">
 
	YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            var ymap = new YMaps.Map(document.getElementById("sobi2GoogleMaps"));
 
            // Установка для карты ее центра и масштаба
            ymap.setCenter(new YMaps.GeoPoint(<?php echo $GeoPos['long']; ?>, <?php echo $GeoPos['lat']; ?>), <?php echo $config->googleMapsZoom; ?>);
 
			ymap.addControl(new YMaps.SmallZoom());
 
			ymap.addControl(new YMaps.ToolBar());
 
			// Создание метки
            var placemark = new YMaps.Placemark(new YMaps.GeoPoint(<?php echo $GeoPos['long']; ?>, <?php echo $GeoPos['lat']; ?>));
 
            // Установка содержимого значка метки
           // placemark.setIconContent('<?php echo $title; ?>');
 
            // Добавление метки на карту
            ymap.addOverlay(placemark);
 
        });
	</script>	if( !$config->useGoogleMaps || !isset( $config->googleMapsApiKey ) ) {
			return null;
		}
 
		$title = $config->jsAddSlashes( $mySobi->title );
		$GeoPos = $config->getGeoPosition( $mySobi->id );
		if( $GeoPos['lat'] && $GeoPos['long'] && is_numeric( $GeoPos['lat'] ) && is_numeric( $GeoPos['lat'] ) ) {
 
		<div style="width: <?php echo $config->googleMapsWidth; ?>px; height: <?php echo $config->googleMapsHeight; ?>px;" id="sobi2GoogleMaps"></div>
<script src="<?php echo 'http://api-maps.yandex.ru/1.1/index.xml?key=', $config->googleMapsApiKey; ?>" type="text/javascript"></script>
 
<script type="text/javascript">
 
 
	YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            var ymap = new YMaps.Map(document.getElementById("sobi2GoogleMaps"));
 
            // Установка для карты ее центра и масштаба
            ymap.setCenter(new YMaps.GeoPoint(<?php echo $GeoPos['long']; ?>, <?php echo $GeoPos['lat']; ?>), <?php echo $config->googleMapsZoom; ?>);
 
			ymap.addControl(new YMaps.SmallZoom());
 
			ymap.addControl(new YMaps.ToolBar());
 
			// Создание метки
            var placemark = new YMaps.Placemark(new YMaps.GeoPoint(<?php echo $GeoPos['long']; ?>, <?php echo $GeoPos['lat']; ?>));
 
            // Установка содержимого значка метки
           // placemark.setIconContent('<?php echo $title; ?>');
 
            // Добавление метки на карту
            ymap.addOverlay(placemark);
 
        });
	</script>

И еще необходимо закомментировать строку echo $waySearchLink; в функции waySearchUrl.

//echo $waySearchLink;

Сохраняем, измененный файл entry.functions.php

После этого мы переходим в режим администрирования сайта.

Там нужно выбрать компонент Sigsiu Online Business Index 2

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

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

Мы увидим форму следующего содержания (если у Вас компонент русифицирован):

Здесь в принципе все понятно без пояснений.

Единственное, что для использования Яндекс.Карт необходимо в поле API ключ ввести соответственно ключ к API Яндекс.Карт для вашего домена.

И поменять местами поля для хранения значений широты и долготы карты.

Тип поля – Скрытое.

Первое значение – долгота (Longitude) поле filds_latmap и второе – широта (Latitude) поле filds_lonmap.

Теперь посмотрим одну из записей каталога в браузере, увидим следующее

Теперь нужно добавить Народную карту.

Для этого также редактируем файл entry.functions.php и функцию showGoogleMaps.

Для отображения Народной карты необходимо подключить специальный модуль и установить необходимый тип Народной карты — НК-схема (YMaps.MapType.PMAP) или НК-гибрид (Ymaps.MapType.PHYBRID).

Для подключения модуля необходимо к ключу API для вашего сайта добавить параметр modules=pmap через символ &.

Это можно сделать двумя способами.

Первый, добавить параметр к ключу в форме параметров карты, параметров отображения компонента Sigsiu Online Business Index 2.

Т. е. мы добавляли

AnpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==

А теперь будем 

ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==&modules=pmap

Второй способ, добавить параметр в функцию showGoogleMaps.

Находим строку

<script src="<?php echo 'http://api-maps.yandex.ru/1.1/index.xml?key=', $config->googleMapsApiKey; ?>" type="text/javascript"></script>

И изменяем ее к виду

<script src="<?php echo 'http://api-maps.yandex.ru/1.1/index.xml?key=', $config->googleMapsApiKey, '&modules=pmap'; ?>" type="text/javascript"></script>

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

Находим строку определения координат центра карты

ymap.setCenter(new YMaps.GeoPoint(<?php echo $GeoPos['long']; ?>, <?php echo $GeoPos['lat']; ?>), <?php echo $config->googleMapsZoom; ?>);

Изменяем ее к виду

ymap.setCenter(new YMaps.GeoPoint(<?php echo $GeoPos['long']; ?>, <?php echo $GeoPos['lat']; ?>), <?php echo $config->googleMapsZoom, ', ', 'YMaps.MapType.PMAP'; ?>);

Здесь Народная карта будет выводиться в виде НК-схемы (YMaps.MapType.PMAP ).

Если Вам необходимо вывести тип НК-гибрид нужно написать Ymaps.MapType.PHYBRID.

При необходимости можно на карту добавить элемент управления типом карты добавим строку

ymap.addControl(new YMaps.TypeControl([YMaps.MapType.PMAP, Ymaps.MapType.PHYBRID]));

Полный код функции showGoogleMaps

function showGoogleMaps($mySobi, $config)
    {
 
	if( !$config->useGoogleMaps || !isset( $config->googleMapsApiKey ) ) {
			return null;
		}
 
		$title = $config->jsAddSlashes( $mySobi->title );
		$GeoPos = $config->getGeoPosition( $mySobi->id );
		if( $GeoPos['lat'] && $GeoPos['long'] && is_numeric( $GeoPos['lat'] ) && is_numeric( $GeoPos['lat'] ) ) {
 
		?>
 
		<div style="width: <?php echo $config->googleMapsWidth; ?>px; height: <?php echo $config->googleMapsHeight; ?>px;" id="sobi2GoogleMaps"></div>
<script src="<?php echo 'http://api-maps.yandex.ru/1.1/index.xml?key=', $config->googleMapsApiKey, '&modules=pmap'; ?>" type="text/javascript"></script>
 
<script type="text/javascript">
 
 
	YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            var ymap = new YMaps.Map(document.getElementById("sobi2GoogleMaps"));
 
            // Установка для карты ее центра и масштаба
            ymap.setCenter(new YMaps.GeoPoint(<?php echo $GeoPos['long']; ?>, <?php echo $GeoPos['lat']; ?>), <?php echo $config->googleMapsZoom, ', ', 'YMaps.MapType.PMAP'; ?>);
			ymap.addControl(new YMaps.TypeControl([YMaps.MapType.PMAP, YMaps.MapType.PHYBRID]));
			ymap.addControl(new YMaps.SmallZoom());
 
			ymap.addControl(new YMaps.ToolBar());
 
			// Создание метки
            var placemark = new YMaps.Placemark(new YMaps.GeoPoint(<?php echo $GeoPos['long']; ?>, <?php echo $GeoPos['lat']; ?>));
 
            // Установка содержимого значка метки
            placemark.setIconContent('<?php echo $title; ?>');
 
            // Добавление метки на карту
            ymap.addOverlay(placemark);
 
        });
	</script>
 
<?php
		}
		elseif ((strlen(trim($GeoPos['lat'])) && strlen(trim($GeoPos['long']))) && (!is_numeric($GeoPos['lat']) || !is_numeric($GeoPos['lat']))) {
			trigger_error("HTML_SOBI::showGoogleMaps(): Given cooordinates ({$GeoPos['lat']}, {$GeoPos['long']}) are not correct. Please enter float values");
		}
    }

Посмотрим запись каталога в браузере

И еще одно замечание.

Если Вы хотите, чтобы пользователи могли сами указывать на карте месторасположение своей организации при добавлении нужно сделать следующее.

Мы берем исходный код из заметки «Изменяем компонент каталога SOBI2 для Joomla – продолжение».

Код

<script src="http://api-maps.yandex.ru/1.1/index.xml?key={googleApiKey}" type="text/javascript"></script>
 
<div id="YMapsID" style="width:400px;height:300px"></div>
 
<script type="text/javascript">
    //<![CDATA[
var placemark;           
            window.onload = function init () {
            var map = new YMaps.Map(document.getElementById("YMapsID"));
map.setCenter(new YMaps.GeoPoint(43.964988,56.318426), 10);
 
map.addControl(new YMaps.SmallZoom());
 
 
YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
 
                map.removeOverlay(placemark);
 
                var newGeoPoint = mEvent.getGeoPoint();	
 
                placemark = new YMaps.Placemark(newGeoPoint);
                map.addOverlay(placemark);
 
                document.getElementById('field_latitude').value = newGeoPoint.getLat();
                document.getElementById('field_longitude').value = newGeoPoint.getLng();
 
          });               
 
          }	
 
//]]>
</script>

Изменяем строку 

<script src="http://api-maps.yandex.ru/1.1/index.xml?key={googleApiKey}" type="text/javascript"></script>

На

<script src="http://api-maps.yandex.ru/1.1/index.xml?key={googleApiKey}&modules=pmap" type="text/javascript"></script>

И строку определения центра карты

map.setCenter(new YMaps.GeoPoint(43.964988,56.318426), 10);

на

map.setCenter(new YMaps.GeoPoint(43.964988,56.318426), 13, YMaps.MapType.PMAP);

Добавить новое поле field_fsmap

Заголовок поля: Задать координаты по карте

Тип поля: text code

Опубликовано: Да

Административное поле: Нет

В поле Текстовый код ввести наш измененный код

Для полей Широта (filds_lonmap) и Долгота (filds_latmap) необходимо изменить параметр Административное поле, установить параметр – нет.

После этого в форме добавления записи появиться Народная карта, где пользователь может указать местоположение.

А координаты метки будут добавляться в поля формы Широта (filds_lonmap) и Долгота (filds_latmap) 

Использование Народной карты в компоненте SOBI2 для Joomla 1.5.: 17 комментариев

  1. Игорь

    Карта установилась, спасибо большое! Но не запоминаются координаты объекта.

    Ответить ↓
    1. admin Автор записи

      А Вы поля для хранения координат широты и долготы включили?

      Ответить ↓
  2. Игорь

    Я изменил обратно с filds_lonmap на filds_longitude и также второе… и все заработало

    Ответить ↓
  3. Игорь

    Я изменил обратно с filds_lonmap на filds_longitude и также второе… и все заработало

    Ответить ↓
    1. admin Автор записи

      Нужно внимательно весь код посмотреть, может быть ошибка при добавлении, что-то лишнее добавили или наоборот пропустили.
      Еще можно проверить так, взять кусок кода с выводом карты из сгенерированной страницы Joomla и вставить в простую html-страницу.
      Посмотреть как выводиться карта. Какие существуют ошибки. Потом на основании этого поправить файл entry.functions.php

      Ответить ↓
  5. Александр

    Еще бы под яндекс передалать Sobi2 Geo Category Overview Module вообще было бы здорово.

    Ответить ↓
    1. admin Автор записи

      Вообще-то, модуль Sobi2 Geo Category Overview Module является платным и его модификация без согласия автора является нарушением.
      Можно написать свой модуль выполняющий тот же функционал с Яндекс.Картами.

      Ответить ↓
  6. Александр

    А если заказать такой модуль вам, сколько это будет стоить?

    Ответить ↓
  7. Александр

    сделал на нормальном соби — все получилось. Наверное когда устанавливал на клон действительно, что-то не учел…
    Но конструкция — ymap.addControl(new YMaps.TypeControl([YMaps.MapType.PMAP, Ymaps.MapType.PHYBRID])); для установки вида карт работать отказалась — пришлось применять — var typeControl = new YMaps.TypeControl([YMaps.MapType.MAP, YMaps.MapType.SATELLITE, YMaps.MapType.HYBRID]);
    ymap.addControl(typeControl);

    вопрос по модулю с функционалом типа Geo Category Overview Module становится все актуальнее…

    Ответить ↓
    1. admin Автор записи

      В принципе да, но есть одно замечание. SobiPro SP-GeoMap Field — специальное поле для работы с картой Google Map не распространяется свободно, а только по платной подписке.

      Ответить ↓
  10. Антон

    Неделю мучался, оказалось, что в первой вставке кода в статье ошибка, а где полная версия: «Полный код функции showGoogleMaps» — там всё верно, всё получилось, надеюсь Заказчик будет доволен. Огромное спасибо.

    Ответить ↓
  11. Виталий

    Еще раз хотелось бы вернутся к вопросу изменений карт Google Map на Яндекс.Карты в Sobipro. Являясь членом клуба Sobipro, могу предоставить необходимые файлы. В Sobi2 карты менял без проблем, но в Sobipro это выше моих сил. Очень надеюсь на положительный ответ.

    Ответить ↓
  12. Евгений

    Здравствуйте. Подскажите,а как можно спрятать карту в «спойлер», чтобы она появлялась при нажатии на «показать карту»?

    Ответить ↓
  13. Михаил

    Я тоже за то чтобы к SobiPro прикрутили народную карту. Плагин SP-GeoMap имеется. У кого нибудь есть соображения, кто поможет?

    Ответить ↓

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *