Плагин для добавления карт Google Maps в статьи компонента K2 на сайте Joomla

Для CMS Joomla существует большое количество разнообразных компонентов, которые помогают расширить ее возможности и функциональность.

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

Если Вам необходимо показать местоположение какого-либо объекта или новости на карте, то было бы не плохо иметь возможность добавить ее в статьи компонента K2.

Существуют различные дополнения позволяющие это сделать, найти их можно в каталоге расширений Joomla ().

Плохо, то что все они платные.

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

Называется он K2 Maps и загрузить его можно здесь.

Он выводит статическую карту Google Maps в материале.

Прочитать о статических картах.

Как он работает?

Предположим что у Вас уже установлена последняя версия компонента K2 и русский язык для него (скачать можно на сайте разработчика http://getk2.org/ и языковый файл http://getk2.org/extend/translations ).

Устанавливаем, загруженный архив с плагином, стандартным способом через менеджер расширений.

Активируем установленный плагин K2 Plugin — Google Maps.

После этого при создании нового материала в компоненте K2, ниже окна для ввода текста страницы появляется форма для добавления параметров отображения карты Google Maps.

Опишу их подробнее.

Longitude — значение географической координаты долготы для метки;
Latitude — значение географической координаты широты для метки;
Marker Color — цвет значка маркера на карте;
Title of the position — текстовое обозначение на маркере (буквенное или цифровое);
Zoom — уровень масштаба карты;
Width of the map — ширина окна карты в пикселях;
Height of the map — высота окна карты в пикселях;
Map Type — тип отображения карты.

Для примера вводим следующие параметры:

Тогда при просмотре материала на сайте мы наблюдаем следующее:

Еще одним положительным моментом работы плагина является, что он успешно работает с версией компонента K2 в Joomla версий 1.5 и 2.5.
Для тестирования я использовал K2 версии 2.5.6 и плагина 1.1.1

Определить координаты для конкретного адреса можно используя специальный инструмент на моем блогге.

Вы вводите в строку поиска искомый адрес, нажимаете на кнопку «Найти», на карте найденный объект помечается маркером, а в низу в поле формы указаны его координаты. Можно также перемещать маркер по карте, в форме будут показываться его новые координаты.

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

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

Для этого нам необходимо отредактировать файлы плагина, расположенные в папке: <папка установки Joomla>/plugins/k2/.

С начала отредактируем файл maps.xml

Открываем его в тестовом редакторе и сразу после строки

<params group="item-content">

добавляем код для возможности выбора статической или динамической карты:

<param name="classmap" type="radio" default="1" label="Статический вид карты" description="Использовать статический вид карты">
	<option value="0">Нет</option>
	<option value="1">Да</option>
</param>

И еще я заменил цвет одной метки с черного на розовый (Black на Pink).

После строки

<option value="yellow">Yellow</option>

следующая стала иметь вид:

<option value="pink">Pink</option>

Сохраняем измененный файл в кодировке UTF-8.

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

В нем сразу после строки

$plugins = new K2Parameter($item->plugins, '', $this->pluginName);

добавляем строку для получения параметра classmap из формы в файле maps.xml

$vidmap = $plugins->get('classmap');

И теперь нужно добавить условие при котором когда $vidmap = 1 отображалась статическая карта, а иначе динамическая.

Для этого мы имеющийся код:

$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"/>';

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

if($vidmap == 1)
		{
		$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"/>';
		}
		else
		{
		switch($color)
		{
			case 'green': $image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png";
			break;
			case 'blue': $image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
			break;
			case 'yellow': $image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png";
			break;
			case 'pink': $image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/pink-dot.png";
			break;
			default: $image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";
		}
 
	  switch($type)
		{ 	
		case 'satellite': $type_map = 'google.maps.MapTypeId.SATELLITE';
		break;
		case 'terrain': $type_map = 'google.maps.MapTypeId.TERRAIN';
		break;
		case 'hybrid': $type_map = 'google.maps.MapTypeId.HYBRID';
		break;
		default: $type_map = 'google.maps.MapTypeId.ROADMAP';
		}
 
		 $output ='
		 <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
    var myLatlng = new google.maps.LatLng('.$longitude.','.$latitude.');
    var myOptions = {
      zoom: '.$zoom.',
      center: myLatlng,
      mapTypeId: '.$type_map.'
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
	var image = "'.$image.'";
 
    var marker = new google.maps.Marker({
        position: myLatlng, 
        map: map,
		icon: image,
        title: "Здесь"
    });   
  }
 
  function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
  }
 
  window.onload = loadScript;
 
</script>
  <div id="map_canvas"  style="width:'.$width.'px;height:'.$height.'px"></div>';
 
		}

В этом коде при $vidmap = 1 как и прежде отображается статическая карта, а иначе формируется код для вывода динамической карты.

Отображается карта с меткой заданного цвета.

Скачать архив с новой версией плагина