jQuery-плагин, позволяющий добавлять Яндекс карты
более простым и оптимальным способом

Особенности

  • "API Яндекс.Карт" загружается на страницу однократно и только, если на ней выводится карта
  • Экономия трафика. Загрузка карты (вместе со скриптом "API Яндекс.Карт") по JS-событию (click, mouseover и т.д.)
  • Возможность запретить зум карты до возникновения JS-события на ней (click, mouseover и т.д.) (Карта не мешает скроллу колесиком мыши, если она на всю ширину страницы)
  • Гибкие опции, большинство из которых идентичны опциям "JavaScript API Яндекс.Карт"
  • Возможность задавать новые/переопределять опции через Data-атрибуты

Демо:

Загрузка по наведению мыши

Демо:

Загрузка по наведению мыши + метки

Пакетные менеджеры

Подключение

1. Подключить последнюю версию jQuery и jquery.eymaps.js
				

				<!-- jQuery -->
				<script src="libs/jquery/dist/jquery.min.js"></script>

				<!-- jquery.eymaps.js -->
				<script src="dist/jquery.eymaps.js"></script>

				
			
2. Создать HTML-контейнер для карты, задать ему высоту и координаты, нанести метки при необходимости:
3. Инициализировать плагин:
				

				$('.example').eyMaps();

				
			

Параметры

Опция Тип Поум. Описание
api String 'https://api-maps.yandex.ru/2.1/?lang=ru_RU' Ссылка на Yandex Map API
event String | Boolean false Подгрузка карты по событию (click, mouseover, mouseenter и т.д.). false - карта будет подгружена при загрузке страницы
zoomAfter String 'click' Разрешает зум карты только по опр. событию на эл-те карты (click, mouseover, mouseenter и т.д.)
map Object { center: [], zoom: 5 } Объект с основными параметрами карты (свойства объекта идентичны свойствам параметра "state" класса "Map" в "JavaScript API Яндекс.Карт") ( Определить координаты )
placemark Array [{ geometry: [], properties: {}, options: {} }] Массив меток (объектов с параметрами меток). Каждый новый объект - новая метка. Параметры внутри объекта (geometry, properties, options) идентичны параметрам класса "Placemark" в "JavaScript API Яндекс.Карт"
Определить координаты
placemarkDefaults Object {} Опции для изменения стиля меток (по умолчанию для всех меток). Свойства этого объекта аналогичны параметрам "options" внутри класса "Placemark" (см. док. "JavaScript API Яндекс.Карт"). Имеют наинизший приоритет, используются, если нигде не переопределены

Примеры использования параметров

				

				$('.example').eyMaps({
					event: 'click',
					zoomAfter: 'mouseover'
				});

				
			

Методы

Метод Аргументы Описание
init options Инициализация
destroy - Деинициализация
reinit newOpts Реинициализация
load - Загрузка карты

Примеры использования методов

				

				var options = { /* Параметры... */ },
					newOpts = { /* Новые параметры... */ };

				$('.example').eyMaps('init', options); // Инициализация с польз. пар-ми
				$('.example').eyMaps(options); // Инициализация с польз. пар-ми
				$('.example').eyMaps(); // Инициализация с пар-ми поум.
				$('.example').eyMaps('destroy'); // Деинициализация
				$('.example').eyMaps('reinit', newOpts); // Реинициализация с новыми пар-ми
				$('.example').eyMaps('reinit'); // Реинициализация с текущими пар-ми
				$('.example').eyMaps('load'); // Загрузка карты

				
			

События

Событие Аргументы Описание
beforeInit.eym e, instance До инициализации
afterInit.eym e, instance После инициализации
beforeLoad.eym e, instance Перед загрузкой карты
afterLoad.eym e, instance, map По окончанию загрузки карты

Примеры использования событий

				
					var example = $('.example');

					example.on('afterLoad.eym', function(e, instance, map) {
						console.log( 'afterLoad: ', e, instance, map );
						/* Аргументы:
							e - объект события
							instance - экземпляр класса EyMaps для элемента, на котором вызвано событие
							map - экземпляр Яндекс карты
						*/
					});

					example.eyMaps(); // Инициализация
				
			

Data-атрибуты

Параметры в Data-атрибуте имеют наивысший приоритет. Они переопределят параметры по умолчанию, а так же пользовательские параметры заданные при инициализации. Значение атрибута - валидный JSON.

Переопределение параметров по умолчанию

				
					/* Изменение параметров по умолчанию (свойство): */
					$.fn.eyMaps.defaults.event = 'click';

					/* Изменение параметров по умолчанию (объект): */
					$.fn.eyMaps.defaults = $.extend(true, {},$.fn.eyMaps.defaults, {
						event: 'mouseover',
						zoomAfter: 'click'
					});

					/* Далее инициализация... */
					$('.example').eyMaps();
				
			

Примеры использования

Пример: Многократное использование карт на странице

Общие параметры для всех карта под классом "example" указываются при инициализации

				
					
					// Инициализация
					$('.example').eyMaps({
						zoomAfter: 'click',
						map: {
							zoom: 15
						}
					});

				
			

Координаты для каждой отдельной карты лучше будет указать в Data-атрибутах

Пример: Загрузка карт по событию

Загрузка карты по наведению мыши будет лучшим решением, если на странице их несколько и одновременная загрузка вызывает подвисания. На блок с картой, пока она не загружена, можно назначить свой фон (например, идентичный скриншот местности). Таким образом мы экономим Мбайты трафика в момент загрузки страницы без потерь информативности и изменений во внешнем виде.

По наведению мыши

В данном примере карта загрузится по наведению мыши на серый блок

				
					
					$('.example').eyMaps({
						event: 'mouseover'
					});

				
			

При появлении карты в области просмотра

В данном примере с помощью плагина jQuery.InVpDo реализована ленивая подгрузка карты.
Проскрольте вниз, чтобы увидеть результат.


				
					
					$('.example').eyMaps({
						event: 'none'
					}).inVpDo({
						once: true,
						onShow: function() {
							$(this).eyMaps('load');
						}
					});

				
			

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Ipsum одна собрал взгляд путь речью на берегу деревни, наш первую послушавшись маленький лучше скатился предупредила рыбными повстречался журчит букв подзаголовок курсивных точках текстами великий живет семь, прямо всеми. Собрал знаках агентство, власти большого необходимыми предупреждал текста подзаголовок рукопись всеми переписывается заглавных составитель, образ домах взобравшись использовало, безопасную семь грамматики первую. Если ему заманивший запятой жаренные букв продолжил единственное, выйти даль встретил предупреждал? Грустный правилами на берегу это гор, ведущими, свою живет. Силуэт запятой залетают диких наш путь ее большого дал букв которой журчит, ты своего что пояс своих своего послушавшись своих свое пунктуация вопроса о приставка маленький меня! Переписывается предупредила, коварный ты использовало, до своих последний то буквенных, скатился жаренные маленькая, составитель! Раз, великий несколько! Переписали деревни повстречался одна своих собрал свою, эта свой скатился грустный назад рыбными предупредила не семь за, рукопись lorem, путь, свой снова проектах возвращайся запятой! Маленькая составитель ipsum рукописи, безопасную инициал предупреждал рекламных рыбными ведущими свой, сих, которой путь предупредила выйти коварных заманивший. Взгляд над собрал, lorem необходимыми пояс вскоре коварный до рукописи своего ты заглавных даль предупреждал безорфографичный обеспечивает текстами однажды, подпоясал вопрос коварных парадигматическая что заманивший. Оксмокс, большой первую алфавит жаренные языком несколько, однажды речью! Залетают повстречался по всей использовало букв подзаголовок свой раз парадигматическая океана которое, лучше! Всеми ведущими она, имени что осталось. Возвращайся точках подпоясал предупредила всемогущая осталось последний если, ему ручеек, жаренные вершину силуэт его безорфографичный, грустный напоивший которое выйти злых над она встретил заманивший первую речью! Своих гор которой обеспечивает всемогущая подзаголовок заманивший вершину однажды вскоре послушавшись злых, пунктуация рыбными они, предложения мир, толку эта грустный маленький текст одна заголовок путь текста. Мир но ведущими обеспечивает, меня ты, ручеек над ее курсивных подзаголовок, единственное рыбными переписали бросил пунктуация океана даже однажды которое страну заголовок парадигматическая первую грамматики свое вскоре, дороге выйти.

Пример: Метки, Хинт, Балун

Для загрузки карты наведите на блок ниже

				
					
					$('.example').eyMaps({

						// Центр карты
						map: {
							center: [55.75613947, 37.62831205],
							zoom: 13
						},

						// Метки
						placemark: [
						
							// Метка №1
							{
								geometry: [55.75699494, 37.65402202], // Координаты метки
								properties: {
									// Содержание окна при наведении на метку
									hintContent: 'Метка №1: Всплывающая подсказка.',
									// Содержание окна при клике на метку
									balloonContent: 'Метка №1 Всплывающее окно.'
								},
								options: {
									// эта опция переопределит аналогичную опцию в параметре placemarkDefaults
									iconColor: 'black'
								}
							},

							// Метка №2
							{
								geometry: [55.75389719, 37.60303859],
								properties: {
									hintContent: 'Метка №2: Всплывающая подсказка.',
									balloonContent: 'Метка №2 Всплывающее окно.'
								}
							}

					   ],

					   // Эти стили будут использ. по умолчанию у всех меток
						placemarkDefaults: { 
							preset: 'islands#dotIcon', // пресет (см. док.)
							iconColor: 'red', // цвет маркера (см. док.)
						},

					});

				
			

История изменений

2.0.0 - 17.01.2019

  • Полностью переработа структура плагина
  • Колбэки заменены соотв. событиями
  • др. исправления...

1.0.1 - 18.08.2018

  • Добавлена поддержка цепочек вызовов
  • Некоторые правки в readme.md

Лицензия (MIT)

Copyright (c) 2018-2019 Sergey Kravchenko

Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, слияние, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, а также лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:

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

ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ ГАРАНТИИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ, НО НЕ ОГРАНИЧИВАЯСЬ ИМИ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО КАКИМ-ЛИБО ИСКАМ, ЗА УЩЕРБ ИЛИ ПО ИНЫМ ТРЕБОВАНИЯМ, В ТОМ ЧИСЛЕ, ПРИ ДЕЙСТВИИ КОНТРАКТА, ДЕЛИКТЕ ИЛИ ИНОЙ СИТУАЦИИ, ВОЗНИКШИМ ИЗ-ЗА ИСПОЛЬЗОВАНИЯ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫХ ДЕЙСТВИЙ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.

Поддержка

Решение проблем/багов плагина, а также замечания и пожелания в соответствующей теме

По всем другим вопросам: wahawaher@gmail.com

www.000webhost.com