Создание плагина для добавления Яндекс.Карт в статьи компонента K2 на сайте Joomla

Автор: | 23.04.2012

В прошлый раз я рассказал вам о плагине добавления карт Google Maps в статьи компонента K2 на сайте Joomla.

Теперь давайте изменим наш плагин так, чтобы можно было вместо карт Google Maps использовать Яндекс.Карты.

Мы будем использовать два вида отображения Яндекс.Карт — статические и динамические.

С начала мы будем использовать API Яндекс.Карт версии 1.1., а затем для динамической карты применим недавно вышедшее API 2.0.

Загрузим архив с плагином из предидущей заметки

Первым мы отредактируем файл maps.xml

В нем мы должны добавить поле для ввода ключа к API Яндекс.Карт.

Между строчками

	<params>
	</params>

добавляем строку кода:

<param name="apikey" type="text" size= "40" default="" label="API ключ Яндекса" description="API ключ Яндекса. Вы должны получить его здесь: http://api.yandex.ru/maps/form.xml" />

Затем изменяем обозначения параметров для цветов меток статической Яндекс.Карты (посмотреть обозначения можно здесь )

Вместо участка кода:

<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="pink">Pink</option>

у нас будет:

<option value="rd">Red</option>
<option value="gn">Green</option>
<option value="bl">Blue</option>
<option value="yw">Yellow</option>
<option value="pn">Pink</option>

Далее удаляем лишние уровни масштаба от 18 по 21, т. к. у Яндекс.Карт максимальный уровень 17.

Также переопределяем типы карты заменяя код:

<option value="roadmap">Roadmap</option>
<option value="satellite">Satellite </option>
<option value="terrain">Terrain</option>
<option value="hybrid">Hybrid</option>

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

<option value="map">Roadmap</option>
<option value="sat">Satellite </option>			
<option value="sat,skl">Hybrid</option>

После этого, сохраняем измененный файл maps.xml.

Теперь редактируем файл maps.php

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

Для этого сразу после строки

$view	= Jrequest::getCmd('view');

добавляем строчку:

$apikey = $pluginParams->get('apikey');

А также заменяем строку кода:

if ($longitude=="") {

на

if ($apikey=="") {

Мы здесь будем проверять присутствует или нет параметр ключа API.

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

Для этого код:

$output = '<img src="http://maps.google.com/maps/api/staticmap?center='.$longitude.','.$latitude.'&zoom='.$zoom.'&size='.$width.'x'.$height.'&maptype='.$type.'
&markers=color:'.$color.'|label:'.$marker.'|'.$longitude.','.$latitude.'&sensor=false"/>';

заменяем следующим:

$output = '<img src="http://static-maps.yandex.ru/1.x/?ll='.$latitude.','.$longitude.'&size='.$width.','.$height.'&z='.$zoom.'&l='.$type.'&pt='.$latitude.','.$longitude.',pm'.$color.'m'.$marker.'&key='.$apikey.'"/>';

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

Для отображения динамической Яндекс.Карты, мы заменим весь код внутри условия else на следующий:

switch($color)
		{
			case 'gn': $style = "default#greenPoint";
			break;
			case 'bl': $style = "default#bluePoint";
			break;
			case 'yw': $style = "default#yellowPoint";
			break;
			case 'pn': $style = "default#pinkPoint";
			break;
			default: $style = "default#redPoint";
		}
 
	  switch($type)
		{ 	
		case 'sat': $type_map = 'YMaps.MapType.SATELLITE';
		break;		
		case 'sat,skl': $type_map = 'YMaps.MapType.HYBRID';
		break;
		default: $type_map = 'YMaps.MapType.MAP';
		}
 
		 $output ='<script src="http://api-maps.yandex.ru/1.1/index.xml?key='.$apikey.'" type="text/javascript"></script>
 
    <script type="text/javascript">
 
        // Создание обработчика для события window.onLoad
 
        YMaps.jQuery(function () {
            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);           
            map.setCenter(new YMaps.GeoPoint('.$latitude.','.$longitude.'), '.$zoom.');
 
			map.setType('.$type_map.');
 
			map.addControl(new YMaps.TypeControl());
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.Zoom());
 
			var placemark = new YMaps.Placemark(new YMaps.GeoPoint('.$latitude.','.$longitude.'), {style:"'.$style.'"});
			map.addOverlay(placemark);
 
        })
 
    </script>
 
    <div id="YMapsID" style="width:'.$width.'px;height:'.$height.'px;"></div>';

Сохраняем файл maps.php

Скачать архив с версией плагина для Яндекс.Карт.

Теперь изменим код вывода динамической Яндекс.Карты, чтобы использовать возможности API Яндекс.Карт версии 2.0.

Заменяем в файле map.php код вывода динамической Яндекс.Карты на следующий:

switch($color)
		{
			case 'gn': $style = "twirl#greenIcon";
			break;
			case 'bl': $style = "twirl#blueIcon";
			break;
			case 'yw': $style = "twirl#yellowIcon";
			break;
			case 'pn': $style = "twirl#pinkIcon";
			break;
			default: $style = "twirl#redIcon";
		}
 
	  switch($type)
		{ 	
		case 'sat': $type_map = 'yandex#satellite';
		break;		
		case 'sat,skl': $type_map = 'yandex#hybrid';
		break;
		case 'pmap': $type_map = 'yandex#publicMap';
		break;		
		case 'sat,pskl': $type_map = 'yandex#publicMapHybrid';
		break;		
		default: $type_map = 'yandex#map';
		}
 
		 $output ='<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 () {
            var myMap = new ymaps.Map("map", {
                    center: ['.$longitude.','.$latitude.'],
                    zoom: '.$zoom.',
					type: "'.$type_map.'"
                });            
 
 
            myMap.controls
                // Кнопка изменения масштаба
                .add("zoomControl")
                // Список типов карты
                .add("typeSelector")
                // Стандартный набор кнопок
                .add("mapTools");
 
				myPlacemark = new ymaps.Placemark(['.$longitude.','.$latitude.'], {iconContent: "'.$marker.'"}, {preset: "'.$style.'"});
				myMap.geoObjects.add(myPlacemark);
 
        }
 
    </script>
 
    <div id="map" style="width:'.$width.'px;height:'.$height.'px;"></div>';

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

Нам также необходимо изменить файл maps.xml

Мы добавим в него при выборе типа карты еще два новых: Народная карта (PublicMap) и гибрид Народной карты (PublicMapHybrid).

Т.е код выбора типа карты будет иметь вид:

	<param name="type" type="list" default="roadmap" label="Map Type" description="Please select a map type!" >
			<option value="map">Roadmap</option>
			<option value="sat">Satellite </option>			
			<option value="sat,skl">Hybrid</option>
			<option value="pmap">PublicMap</option>
			<option value="sat,pskl">PublicMapHybrid</option>		
		</param>

Сохраняем файл maps.xml

Загрузить архив с измененой версией плагина.

Посмотрим на примере как работает наш плагин.

После установки новой версии плагина в его параметрах появилось новое поле API ключ Яндекса

Добавляем карту к заметке.

Вид статической карты

Вид динамической карты

Вид динамической карты с API Яндекс.Карт версии 2.0.

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

Создание плагина для добавления Яндекс.Карт в статьи компонента K2 на сайте Joomla: 8 комментариев

  1. Юля

    Отлично то как! А существуют ли подобные плагины для добавления в статьи joomla полилинии по заданному массиву координат?

    1. admin Автор записи

      Плагины для K2 существуют, но во-первых они платные, а во-вторых все используют Google Maps.
      Можно доработать плагин для Яндекс.Карт для K2, если добавить поле для ввода пути к YMapsML-файлу.

  2. Max61

    Добрый день все замечательно работает
    есть вопрос как сделать народную карту по умолчанию
    и изменение масштаба колесиком мышки

    1. admin Автор записи

      Чтобы работало изменение масштаба колесиком мышки необходимо в код файла maps.php добавить две строчки:

      после строки type: «‘.$type_map.'» через запятую строку behaviors: [«default», «scrollZoom»]

      А перед строчками определения метки на карте:

      myMap.behaviors.enable("ruler");
  3. Евгений

    Не работает. Гугл работает, а эти два варианта нет.
    Может из joomla 2.5.9 и K2 2.6.5?
    Не поможете?

  4. Евгений

    Неужели автор статьи даже предположить ничего не может?

    1. admin Автор записи

      Нашел ошибку в плагине, переделал. Все отлично работает. Теперь даже не обязательно указывать ключ к API Яндекс.Карт для статической карты.
      Загрузить плагин можно отсюда

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

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