Отправка сообщения






Добро пожаловать!

Конфликт библиотек: табы на JQuery и карта bitrix:map.google.view

Привет, при использовании табов на JQuery и компонента bitrix:maps.google.view на одной странице способны спровоцировать конфликт библиотек, после этого визуальные элементы на странице перестают работать корректно. Как решить эту задачу?
В моем случае, карта размещалась в одном из табов, это в значительной степени облегчило решение этого вопроса. Пройдясь немного по форумам в поисках решения, нашелся один вариант, который меня вполне устроил. Суть решения такова: на таб, где находиться карта — добавляется обработчик события, который будет реагировать на нажатие кнопки таба. Затем, по нажатию будет производиться инициализация карты. Таким образом, при первоначальной загрузке страницы табы загружаются по умолчанию, глюков нет, после чего при переходе по нужной вкладке вызывается функция инициализирующая карту.
В коде, таб выглядит таким образом:

...
<li class="tabname_2"><a href="#tabs-4"><span>Карта</span></a></li>
...

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

...
<div id="tabs-4">
<?$APPLICATION->IncludeComponent("bitrix:map.google.view","",Array(
		"INIT_MAP_TYPE" => "ROADMAP",
		"MAP_DATA" => $arrMapParam,
		"MAP_WIDTH" => "710",
		"MAP_HEIGHT" => "500",
		"CONTROLS" => array(
			"SMALL_ZOOM_CONTROL",
			"TYPECONTROL",
			"SCALELINE"
		),
		"OPTIONS" => array(
			"ENABLE_SCROLL_ZOOM",
			"ENABLE_DBLCLICK_ZOOM",
			"ENABLE_DRAGGING",
			"ENABLE_KEYBOARD"
		),
		"MAP_ID" => "myMapID",
		"WAIT_FOR_EVENT" => "Y"
	)
);?>
</div>
...

Всё вроде бы просто, однако это дело у меня отказывалось работать корректно, работали табы, а карта глючила, что послужило причиной придумывания этого костыля. Просмотрев код компонента карты, заметил две функции, которые пригодятся для инициализации. Кроме того обратите внимание что в параметрах вызова компонента указано значение MAP_ID. Его необходимо указать обязательно.
Функция, реагирующая на событие:

<script>
function loadGMap(){
	init_myMapID ();
	BX_SetPlacemarks_myMapID ();
}
</script>

В табе необходимо дописать обработчик события onClick():

…
<li class="tabname_2" onClick="loadGMap();"><a href="#tabs-4"><span>Карта</span></a></li>
…

Итак, при клике на таб, вызывается функция loadGMap(), в которой производиться инициализация карты. init_myMapID() – инициализирует карту myMapID, BX_SetPlacemarks_myMapID() – устанавливает точки на карте, если таковые были. В моем примере эти координаты передавались в переменной $arrMapParam, при обращении к компоненту карты.

Добавил: htmaker, 19.03.2014 г.
 
плохослабосойдетхорошоотлично (Еще не оценили)
Загрузка...

Комментарии

  1. Алексей пишет:

    Спасибо! Очень выручили — мне нужно было три карты показывать по очереди и были проблемы с отображением. Решение достойно размещения в базе знаний )

    1. htmaker пишет:

      это здорово)

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

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

Комментарии

  • Загрузка...

Наверх