О web-разработке
и даже немного больше...

Конфликт библиотек: табы на 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, при обращении к компоненту карты.

Опубликован: 19.03.2014 г.

См. также:

«Не удалось установить соединение с сервером. Проверьте …».
Получение Email-адреса покупателя в заказе (Bitrix D7)
Работа с URL-адресами в Bitrix D7
Работа с купонами в Bitrix API
Добавляем пункт меню для списков в админке Битрикс
Диалоговые окна в Bitrix API
Создание инфоблока при установке модуля
Создание копии корзины из заказа на Bitrix D7

Комментарии

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

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

    1. htmaker пишет:

      это здорово)

  2. Кирилл пишет:

    Спасибо Вам! А то реально голову свернул и именно Битрикс код ставил, так что и с MAP_ID Вы тоже помогли!
    Жмакнул на баннерах в благодарность! )

Добавить комментарий для htmaker Отменить ответ

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

Комментарии
  • Загрузка...
Друзья сайта