Скрываем Яндекс.Карту в компоненте AdsManager для Joomla 1.5

На своем блоге в заметке «Заменяем карты Google Maps на Яндекс.Карты в компоненте AdsManager для Joomla 1.5» я писал о том, как заменить карты Google Maps на Яндекс.Карты.

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

В начале Вам потребуется измененный файл для показа карты в компоненте AdsManager для Joomla 1.5.

Архив с ним можно скачать отсюда.

Провести установку компонента AdsManager и плагина к нему, необходимые настройки и изменения, как написано в заметке«Заменяем карты Google Maps на Яндекс.Карты в компоненте AdsManager для Joomla 1.5».

Мы будем изменять файл plug.php, который находится по адресу <папка установки Joomla>/images/com_adsmanager/plugins/gmap/.

Открываем файл в любом текстовом редакторе и начинаем исправлять.

В файле plug.php нас будут интересовать одна функция getDetailsDisplay, она отвечает за вывод карты в режиме просмотра объявления.

В API Яндекс.Карт существует возможность загрузки API по требованию, ее мы и будем использовать.

Для этого строку подключения API карт необходимо добавить параметр loadByRequire = 1.

т. е. В функции getDetailsDisplay строку:

$return = '<script src="http://api-maps.yandex.ru/1.1/index.xml?key='.$google_key.'" type="text/javascript"></script>';

изменяем на:

$return = '<script src="http://api-maps.yandex.ru/1.1/index.xml?loadByRequire=1&key='.$google_key.'" type="text/javascript"></script>';

Нужно также изменить функцию инициализации карты

строку

$return .= 'YMaps.jQuery(function () {';

заменить на

$return .= 'function init () {'

А также убрать лишнюю закрывающую полукруглую скобку в строке

$return .= ‘});’; преред закрывающим тегом script.

Перед выводом контейнера с картой добавить следующую строку кода:

$return .= '<input id="viewmap" type="button" value="Показать карту" onclick="YMaps.load(init)" /><br />';

Он выводит кнопку «Показать карту» в объявлении, при нажатии на которую показывается карта.

В принципе этого достаточно.

Сохраняем файл и смотрим, что у нас получилось

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

Нужно скрыть область карты.

Для этого в свойства контейнера div вывода карты добавляем параметр display:none;

Теперь строка

$return .= '<div id="map_canvas'.$fieldid.'" style="width: '.$map_width.'px; height: '.$map_height.'px"></div>';

имеет вид

$return .= '<div id="map_canvas'.$fieldid.'" style="width: '.$map_width.'px; height: '.$map_height.'px; display:none;"></div>';

И еще три строчки в функцию инициализации карты перед строкой

$return .= 'map = new Ymaps.Map(YMaps.jQuery("#map_canvas'.$fieldid.'")[0]);';

$return .= 'if ( YMaps.jQuery("#map_canvas'.$fieldid.'").is(":hidden") ){';
$return .= 'YMaps.jQuery("#map_canvas'.$fieldid.'").show();';
$return .= 'YMaps.jQuery("#viewmap").hide();}';

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

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

function getDetailsDisplay($contentid,$field)
	{
		global $database;
		$query = "SELECT lat,lng FROM #__adsmanager_fieldgmap ".
				 "WHERE fieldid = $field->fieldid AND contentid = $contentid";
		$fieldid = $field->fieldid;
		$database->setQuery($query);
		$database->loadObject($result );
		if ($result)
		{
			$lat = $result->lat;
			$lng = $result->lng;
			$database->setQuery("SELECT * FROM #__adsmanager_fieldgmap_conf WHERE fieldid = $field->fieldid");
			$database->loadObject($conf);
			$map_width = $conf->map_width;//500;
			$map_height= $conf->map_height;//300;
			$google_key = $conf->google_key;//
 
			$return = '<script src="http://api-maps.yandex.ru/1.1/index.xml?loadByRequire=1&key='.$google_key.'" type="text/javascript"></script>';
 
			$return .= '<script type="text/javascript">';
			$return .= 'function init () {';
			$return .= 'if ( YMaps.jQuery("#map_canvas'.$fieldid.'").is(":hidden") ){';
			$return .= 'YMaps.jQuery("#map_canvas'.$fieldid.'").show();';
			$return .= 'YMaps.jQuery("#viewmap").hide();}';
			$return .= 'map = new YMaps.Map(YMaps.jQuery("#map_canvas'.$fieldid.'")[0]);';
			$return .= 'map.setCenter(new YMaps.GeoPoint('.$lat.', '.$lng.'), 15, YMaps.MapType.MAP);';
			$return .= 'var point = new YMaps.GeoPoint('.$lat.', '.$lng.');';
			$return .= 'var placemark = new YMaps.Placemark(point);';
			$return .= 'map.addOverlay(placemark);';
			$return .= 'map.addControl(new YMaps.TypeControl());';
			$return .= 'map.addControl(new YMaps.ToolBar());';
			$return .= 'map.addControl(new YMaps.Zoom());';
			$return .= '};';
			$return .= '</script>';
			$return .= '<input id="viewmap" type="button" value="Показать карту" onclick="YMaps.load(init)" /><br />';
			$return .= '<div id="map_canvas'.$fieldid.'" style="width: '.$map_width.'px; height: '.$map_height.'px; display:none;"></div>';			
			return $return;
		}
	}

Сохраняем файл и смотрим, что у нас получилось

Нажимаем на кнопку «Показать карту» и наблюдаем

Скачать архив с измененным файлом plug.php

Скрываем Яндекс.Карту в компоненте AdsManager для Joomla 1.5

Скрываем Яндекс.Карту в компоненте AdsManager для Joomla 1.5: 1 комментарий

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