Совместное использование Google Maps v3 и Яндекс.Карт в компоненте SOBI2 для Joomla 1.5

Автор: | 26.12.2010
10 комментариев

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

В этой заметке я хочу рассказать как можно организовать совместное использование Google Maps v3 и Яндекс.Карт в компоненте SOBI2.

Это бывает необходимо, когда в каталоге будет содержаться информация по нескольким городам России или мира. Карты для которых имеют различное детальное представление на Яндекс.Картах и картах Google.

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

После установки и русификации нужно наполнить каталог необходимыми данными.

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

С начала мы должны включить поля для хранения значений координат на карте: Longitude (field_longitude) — значение долготы и Latitude (field_latitude) — широты.

В панели администрирования компонента SOBI2 выбрать Параметры — Настройка полей и опубликовать данные поля.

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

Установить следующие параметры:

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

Ввести значение API ключа для вашего домена API Google Maps v2

Значения ширины и высоты окна карты в пикселях

Указать поля для хранения значений координат: поле для значения широты карты field_latitude и для значения долготы карты field_longitude

Информационное окно — Отключить информационное окно направления

Масштаб увеличения — 17

Сохраняем изменения и добавляем значения координат в соответствующие поля для каждой записи в каталоге SOBI2.

Посмотрим содержание одной из записей на сайте и увидим следующее:

Теперь давайте заменим код для API Google v2 на API Google Maps v3.

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

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

Заменим код функции showGoogleMaps на новый:

function showGoogleMaps($mySobi, $config)
    {
 
		if( !$config->useGoogleMaps) {
			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 type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
						<script type="text/javascript">
				//<![CDATA[
 
				function initialize() {
					var myLatlng = new google.maps.LatLng(<?php echo $GeoPos['lat']; ?>, <?php echo $GeoPos['long']; ?>);
					var myOptions = {
						zoom: <?php echo $config->googleMapsZoom; ?>,
						center: myLatlng,
						mapTypeControl: false,
						navigationControl: true,
						navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
						mapTypeId: google.maps.MapTypeId.ROADMAP      
					}
					var map = new google.maps.Map(document.getElementById("sobi2GoogleMaps"), myOptions);
 
					var marker = new google.maps.Marker({
					position: myLatlng, 
					map: map,
					title:"<?php echo _SOBI2_GOOGLEMAPS_LABEL; ?>"
					}); 
 
 
				}
 
                 google.maps.event.addDomListener(window,'load', initialize);
 
				//]]>
						</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");
		}
    }

Здесь, в начале проверяются: включено ли отображения карт Google, есть ли числовые значения в полях field_latitude и field_longitude.

После определяем контейнер для карты и подключаем API Google Maps v3.

В функции initialize определяем свойства карты и метку на карте.

Функция google.maps.event.addDomListener слушает событие загрузки страницы и вызывает функцию для инициализации карты.

Загрузим наш пример в браузере и увидим следующее:

Все нормально работает.

Теперь в панели администрирования компонента SOBI2 нужно выбрать Параметры — Настройка полей и создать новое поле для хранения типа отображения карты Яндекс.Карты (Yandexmap) или Google Maps (Googlemap).

Нажимаем на кнопку «Добавить новое поле» и задаем необходимые параметры:

название поля — field_maptype;

заголовок поля — Тип карты;

Тип поля — select list (выпадающий список);

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

Отображать поле — Скрытое

Остальные поля оставляем без изменения

И самое главное в разделе «Список встроенного выбора список/чекбокс групп» нужно нажать на кнопку «Добавить новую пару случайных величин».

Для первой пары задаем значения: field_maptype — ymap и Yandexmap

Еще раз нажимаем кнопку «Добавить новую пару случайных величин» и для второй пары значений:

field_maptype — gmap и Googlemap.

Сохраняем поле.

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

И теперь нам осталось немного доработать еще файл entry.functions.php.

В него мы добавим проверку значения поля field_maptype, в зависимости от него будет отображаться карта Google или Яндекс.

Привожу окончательный код функции 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'] ) ) {
 
$map_type = $mySobi->customFieldsData['field_maptype'];			
 
 
if($map_type == 'Yandexmap')
{
 
?>
 
<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>	
 
<?php
 
}
else
{
 
?>
 
<div style="width: <?php echo $config->googleMapsWidth; ?>px; height: <?php echo $config->googleMapsHeight; ?>px;" id="sobi2GoogleMaps1"></div>
					<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 
<script type="text/javascript">
 
				function initialize() {
					var myLatlng = new google.maps.LatLng(<?php echo $GeoPos['lat']; ?>, <?php echo $GeoPos['long']; ?>);
					var myOptions = {
						zoom: <?php echo $config->googleMapsZoom; ?>,
						center: myLatlng,
						mapTypeControl: false,
						navigationControl: true,
						navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
						mapTypeId: google.maps.MapTypeId.ROADMAP      
					}
					var map = new google.maps.Map(document.getElementById("sobi2GoogleMaps1"), myOptions);
 
					var marker = new google.maps.Marker({
					position: myLatlng, 
					map: map,
					title:"<?php echo _SOBI2_GOOGLEMAPS_LABEL; ?>"
					}); 
 
 
				}
 
                 google.maps.event.addDomListener(window,'load', initialize);
 
</script>
 
<?php
}
?>	
 
 
 
<?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");
		}
    }

Т. к. мы используем для отображения карты Google версию API -3, она не требует ввода ключа API, то в поле «Ввести значение API ключа для вашего домена API Google Maps” нужно добавить ключ API Яндексю.Карт для вашего домена.

Посмотрим как это работает.

Для записи ABS, Ресторан-Пивоварня был выставлен параметр field_maptype = «Yandexmap», а для записи Biblioteca, ресторан field_maptype = «Googlemap».

Загружаем страницы в браузере и наблюдаем

ABS, Ресторан-Пивоварня

Biblioteca, ресторан

Поменяем соответственно через панель администрирования компонента SOBI2 значения для поля field_maptype и наблюдаем следующее:

ABS, Ресторан-Пивоварня

Biblioteca, ресторан

Скачать исправленный файл entry.functions.php можно entry.functions.php

Это лишь один из примеров реализации совместного использования Google Maps v3 и Яндекс.Карт в компоненте SOBI2 для Joomla 1.5, но основываясь на нем, а также другие заметки по доработке компонента https://webmap-blog.ru/tag/sobi2 Вы сможете реализовать любую необходимую Вам функциональность.

В место Яндекс.Карт можно использовать Народную карту, если подключить соответствующий модуль API – pmap.

Совместное использование Google Maps v3 и Яндекс.Карт в компоненте SOBI2 для Joomla 1.5: 10 комментариев

  1. negodiy

    а можно это реализовать используя плагин Google Maps. просто есть необходимость что бы карта выводилась в lightboxе?

    Ответить ↓
  2. dee

    Здраствуйте, подскажите можно ли данный код переделать под google api v3 ?

    //

    Ответить ↓
  3. Peter

    На денвере PHP5.2 отлично работает. На хосте PHP5.3 — белый лист и никаких ошибок. индексная страница не грузится вообще. Чего только не делал.

    Ответить ↓
  4. Татьяна

    Большое СПАСИБО! Все работает. Еще бы картинки почитабельнее, а то не разглядеть настройки «Добавить новую пару случайных величин». Спасибо ещё раз! 🙂

    Ответить ↓
  6. Кабина

    Даже не знала, что существует такая возможность. Обязательно попытаюсь это реализовать на своих проектах.

    Ответить ↓

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

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