Изучаем работу с балунами, используя API Яндекс.Карт версии 2.х

В этой заметке я продолжаю свой рассказ об особенностях использования API Яндекс.Карт версии 2.х начатой в заметках здесь и здесь.

И теперь рассмотрим работу с балуном.

Давайте рассмотрим пример отображения балуна при клике на метке.

Код примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример добавления метки и балуна, с использованием JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.315695,44.017063], // Нижний Новгород
                    zoom: 15
                });
 
				// Создание метки 
				var myPlacemark = new ymaps.Placemark(
				// Координаты метки
				[56.315695,44.017063], {
				balloonContent: 'Оперный театр'
				}	
			);
 
		// Добавление метки на карту
		myMap.geoObjects.add(myPlacemark);
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

В этом примере мы добавляем параметр balloonContent: ‘Оперный театр’.

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

Пример кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример добавления балуна с заданием содержимого - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.315695,44.017063], // Нижний Новгород
                    zoom: 15
                });
 
				// Создание метки 
				var myPlacemark = new ymaps.Placemark(
				// Координаты метки
				[56.315695,44.017063], {
				balloonContentHeader: '<strong>Оперный театр</strong>',
				balloonContentBody: 'Содержимое <em>балуна</em>',
				balloonContentFooter: 'Подвал'
				}	
			);
 
		// Добавление метки на карту
		myMap.geoObjects.add(myPlacemark);
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

В этом примере содержимое для заголовка задает параметр balloonContentHeader, balloonContentBody — задает основную часть и balloonContentFooter — нижнюю часть (подвал) балуна.

В следующем примере, рассмотрим как можно отобразить балун на карте без метки.

Код примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример добавления балуна без метки, с использованием JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.315695,44.017063], // Нижний Новгород
                    zoom: 15
                });
 
 
			myMap.balloon.open(
				// Позиция балуна
				[56.315695,44.017063], {
				contentBody: 'Оперный театр'
			}, {
               // Опции балуна. В данном примере указываем, что балун не должен иметь кнопку закрытия.
                closeButton: false
        });				
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

Здесь мы определяем параметры для открытого балуна: позинию на карте, содержимое — contentBody: ‘Оперный театр’, а ткже задаем опцию для балуна — отсутствие кнопки закрытия closeButton: false

Еще одной интересной возможностью для работы с балунами является использование шаблонов для задания макета содержимого.

Пример кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример задаем шаблон для балуна - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.317222,44.002149], 
                    zoom: 14
                });
 
			myPlacemarkOpera = new ymaps.Placemark([56.315695,44.017063], {
				name: 'Оперный театр',
				address: 'ул. Белинского, 59',
				websayt: 'www.operann.ru/'
 
			}),
 
			myPlacemarkDramma = new ymaps.Placemark([56.324117,44.00136], {
				name: 'Театр драмы',
				address: 'ул. Большая Покровская, д. 13',
				websayt: 'www.drama.nnov.ru'
 
			}),
 
			myPlacemarkKomedia = new ymaps.Placemark([56.320203,44.002321], {
				name: 'Нижегородский театр «Комедія»',
				address: 'ул. Грузинская, д. 23',
				websayt: 'comedia.nnov.ru'
 
			}),
 
			// Создаем коллекцию, в которую будем добавлять метки
                myCollection = new ymaps.GeoObjectCollection();
 
            //Добавляем метки в коллекцию геообъектов.
            myCollection
                .add(myPlacemarkOpera)
				.add(myPlacemarkDramma)
                .add(myPlacemarkKomedia);
 
            // Создаем шаблон для отображения контента балуна
            var myBalloonLayout = ymaps.templateLayoutFactory.createClass(
                '<h3>$[properties.name]</h3>' +
                '<p><strong>Адрес:</strong> $[properties.address]</p>' +
                '<p><strong>Веб-сайт:</strong> <a rel="nofollow" href="http://$[properties.websayt]" target="_blank">перейти</a></p>'
            );
 
            // Помещаем созданный шаблон в хранилище шаблонов. Теперь наш шаблон доступен по ключу 'my#theaterlayout'.
            ymaps.layout.storage.add('my#theaterlayout', myBalloonLayout);
 
            // Задаем наш шаблон для балунов геобъектов коллекции.
            myCollection.options.set({
                balloonContentBodyLayout:'my#theaterlayout',
                // Максимальная ширина балуна в пикселах
                balloonMaxWidth: 300
            });
 
            // Добавляем коллекцию геообъектов на карту.
            myMap.geoObjects.add(myCollection);
 
 
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

В начале мы задаем параметры для меток на карте.

Потом мы создаем коллекцию геообъектов myCollection и добавляем в нее наши метки.

После этого задаем шаблон для отображения контента балуна.

Добавляем созданный шаблон в хранилище и применяем его для нашей коллекции меток.

В самом конце добавляем коллекцию геообъектов на карту.

Еще один пример — создание макета балуна для полного изменения его внешнего вида.

В самом начале мы должны подготовить изображение будущего балуна.

Это можно сделать в любом графическом редакторе.

Теперь мы можем написать код для нашего примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример балун со своим макетом - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.315695,44.017063], // Нижний Новгород
                    zoom: 16
                });
 
 
				// Создаем метку с изображением коалы
                myPlacemark = new ymaps.Placemark([56.315695,44.017063], {
                    // Контент балуна
                    balloonContent: '<div style = "margin-top: 30px; margin-left: 20px;" ><b>Оперный театр</b><br/>ул. Белинского, 59</div>'
                }, {
                     // Изображение иконки метки
                    iconImageHref: 'theater.png',
                    // Размеры изображения иконки
                    iconImageSize: [32, 37],  
					// смещение картинки
					iconImageOffset: [-16, -37],
                    // Размеры содержимого балуна
                    balloonContentSize: [130, 130],
                    // Задаем макет балуна - пользовательская картинка с контентом
                    balloonLayout: "default#imageWithContent",
                    // Картинка балуна
                    balloonImageHref: 'newbaloon.png',
                    // Смещение картинки балуна
                    balloonImageOffset: [-5, -60],
                    // Размеры картинки балуна
                    balloonImageSize: [150, 150],
                    // Балун не имеет тени
                    balloonShadow: false
                });
 
            // Добавляем метку на карту
            myMap.geoObjects.add(myPlacemark);
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Здесь мы создаем макет балуна default#imageWithContent.

И параметры для содержимого балуна.

Посмотреть пример в действии

Загрузить архив с файлами примеров

  • Гость: Отличные статьи с примерами. А не могли бы вы опубликовать статью с описанием работы редактора геометрии? А то на офсайте все так скудно описано (( Спасибо
  • Гость: Спасибо за статью очень помогла. Честно сказать решила мою проблему я даже не парился доступно легко. Вообщем побольше таких статей и мне ваще работать не прийдется только копи пастить))) Спасибище!
  • Гость: Отличные, очень полезные статьи! Все подробно и понятно. Абсолютно не разбираясь в программировании, собрал карту для сайта. Огромное спасибо!
  • Гость: делал по вашему шаблону, но карта перестала грузиться, не подскажите в чем ошибка? // &lt;![CDATA[ ymaps.ready(init); var myMap, myPlacemark; function init(){ myMap = new ymaps.Map (&quot;map&quot;, { center: [39.734976,54.627714], zoom: 14 }); myPlacemarkOpera = new ymaps.Placemark([39.734976,54.627714], { name: &#039;Тест&#039;, address: &#039;ул. Белинского, 59&#039;, websayt: &#039;www.ya.ru/&#039; }), myCollection = new ymaps.GeoObjectCollection(); myCollection .add(myPlacemarkOpera) var myBalloonLayout = ymaps.templateLayoutFactory.createClass( &#039;$[properties.name]'+ '<strong>Адрес:</strong> $[properties.address]'+ '<strong>Веб-сайт:</strong> <a href="http://$[properties.websayt]" rel="nofollow">перейти</a>' ); ymaps.layout.storage.add('flatlayout', myBalloonLayout); myCollection.options.set({ balloonContentBodyLayout:'flatlayout', balloonMaxWidth: 300 }); myMap.geoObjects.add(myCollection); } // ]]&gt; <!--карта-->
  • Гость: Все просто в этой точке максимальный уровень масштаба 7, а у Вас 14.
  • Гость: Не понял, причем здесь масштаб. Исправлял на 7, все равно не работает. Мне кажется, что я напартачил где то в этой части myPlacemarkOpera = new ymaps.Placemark([39.734976,54.627714], { name: 'Тест', address: 'ул. Белинского, 59', websayt: 'www.ya.ru/' }), myCollection = new ymaps.GeoObjectCollection(); myCollection .add(myPlacemarkOpera) var myBalloonLayout = ymaps.templateLayoutFactory.createClass( '$[properties.name]‘+ ‘Адрес: $[properties.address]‘+ ‘Веб-сайт: перейти‘ ); ymaps.layout.storage.add(‘flatlayout’, myBalloonLayout); myCollection.options.set({ balloonContentBodyLayout:’flatlayout’, balloonMaxWidth: 300 }); myMap.geoObjects.add(myCollection);
  • Гость: у меня coordorder=longlat
  • Гость: если не трудно, скинте код из примера в блокноте на linkin62@mail.ru . Заранее спасибо.
  • Гость: Вот рабочий <a href="http://webmap-blog.ru/files/baloon-test.html" title="пример" target="_blank" rel="nofollow">пример</a>
  • Гость: Огромное спасибо! Без Вас не разобрался бы.
  • Гость: Выяснил , в чем была проблема изначально. Вордпресс съедал теги и получалась ошибка в коде.
  • Гость: теги переноса строки
  • Гость: Здравствуйте... А можно в балун добавить Картинку и одновременно текст... Я пробывал вставить... текст появляеться а как только прописываю картинку ... карта пропадает...
  • Гость: Добрый день! Подскажите, как в 4м примере задать меткам собственную картинку? Побывал после координат вставлять { iconImageHref: 'http://webmap-blog.ru/files/gmap/gicon/mm_20_red.png', // картинка иконки iconImageSize: [12, 20], // размеры картинки iconImageOffset: [-6, -10] // смещение картинки }, карта - работает, а метка не меняется.
  • Гость: Реально сделать, чтобы для всех меток выводились хинты из поля name в балуне автоматически?
  • Гость: Можно сделать функцию, которая будет добавлять метки на карту. Входными параметрами она будет принимать параметры метки (название, описание координаты, стиль) и в ее коде прописать параметр hintText равный названию.
  • Гость: Благодарю, что отвечаете! С хинтами разобрался по аналогии с балуном. Сори за офтоп, но просто писал уже здесь. Скажите, есть возможность, чтобы метка светилась другим цветом или как-то иначе изменяла свой внешний вид при наведении на нее курсора? (по аналогии с hover в сss)
  • Гость: Есть пример <a href="http://ymapsapi.ya.ru/replies.xml?item_no=701" title="Изменение значка метки при наведении" target="_blank" rel="nofollow">Изменение значка метки при наведении</a>
  • Гость: Спасибо!Отлично работает! А что нужно дописать, чтобы ещё появлялась панелька с + и - , всмысле приблизить и отдалить?
  • Гость: Подскажите, есть у Вас на сайте примеры, где создаются и подключаются собственные стили для балунов или хинтов? нужно изменить внешний вид хинтов через css.
  • Гость: На блоге такого нет, но есть в примерах на сайте API Яндекс.Карт - <a href="http://api.yandex.ru/maps/doc/jsapi/2.x/examples/hinttemplate.html" title="Задание собственного шаблона всплывающей подсказки" target="_blank" rel="nofollow">Задание собственного шаблона всплывающей подсказки</a>
  • Гость: ПОМОГИТЕ ПОЖАЛУЙСТА! Делаю сайт в подарок сестре, куда добавить balloonContentHeader: '<strong>Оперный театр</strong>', balloonContentBody: 'Содержимое <em>балуна</em>', balloonContentFooter: 'Подвал' в этот код? ymaps.ready(init); function init(){ var geocoder = new ymaps.geocode( // Строка с адресом, который нужно геокодировать 'Россия, Москва', // требуемое количество результатов { results: 1 } ); // После того, как поиск вернул результат, вызывается callback-функция geocoder.then( function (res) { // координаты объекта var coord = res.geoObjects.get(0).geometry.getCoordinates(); var map = new ymaps.Map('map', { // Центр карты - координаты первого элемента center: coord, // Коэффициент масштабирования zoom: 2, }); // Добавление метки на карту map.geoObjects.add(res.geoObjects.get(0)); // устанавливаем максимально возможный коэффициент масштабирования - 1 map.zoomRange.get(coord).then(function(range){ map.setCenter(coord, range[1] - 1) }); // Добавление стандартного набора кнопок map.controls.add('mapTools') // Добавление кнопки изменения масштаба .add('zoomControl') // Добавление списка типов карты .add('typeSelector'); } ); }
  • Гость: Как поставить 3 балуна - понятно. А если надо поставить 30000? Если для каждой метки вызывать new ymaps.Placemark, то это сколько ждать придется... Есть-ли способ группового создания множества меток?
  • Гость: Дякую, теж допомогло в скрутний момент))
  • Гость: Оч помог разобратсься с картами, но вы не могли бы подсказать как в последнем примере задать чтоб baloon был иначально open как это сделано в ваотанте № 3 (myMap.balloon.open) как совместить это с последним вариантом?
  • Гость: Класс! Надо попробовать!
  • Дмитрий Громов: Здравствуйте! Подскажите, пожалуйста, возможно ли, и каким образом, вставить в балун не текст или изображение, а, к примеру, подобный график? http://bl.ocks.org/mbostock/3883245 Заранее спасибо!
  • Юрий Карасёв: А не подскажите, можно ли передать информацию из балуна с инфой в текстовое поле на сайте?
  • Сергей: А как сделать ballon с кнопкой?