Несколько своих стилизованных меток на Яндекс карте API 2.0

В одной из прошлых статей мы разбирались как работает API яндекс карт на примере создания компонента для НэтКэта, но все это дело относилось к старому API версии 1.0. В этой статье мы будем делать тоже самое для Яндекс карты с API 2.0, а именно: добавим несколько меток, сделаем свои иконки вместо стандартных меток, полностью изменим стиль всплывалок (балунов) и все такое.

Берем код и создаем карту

В версии API 2.Х не надо получать никаких ключей просто втыкаем код и привязываем карту к нужному диву и все.

<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
   ymaps.ready(init); // карта соберется после загрузки скрипта и элементов
   var myMap; // заглобалим переменную карты чтобы можно было ею вертеть из любого места
   function init () { // функция - собиралка карты и фигни
       myMap = new ymaps.Map("map", { // создаем и присваиваем глобальной переменной карту и суем её в див с id="map"
            center: [55.76, 37.64], // ну тут центр
            behaviors: ['default', 'scrollZoom'], // скроллинг колесом
            zoom: 10 // тут масштаб
       });
       myMap.controls // добавим всяких кнопок, в скобках их позиции в блоке
            .add('zoomControl', { left: 5, top: 5 }) //Масштаб
            .add('typeSelector') //Список типов карты
            .add('mapTools', { left: 35, top: 5 }) // Стандартный набор кнопок
            .add('searchControl'); // Строка с поиском
        }
</script>

Добавляем и стилизуем метки

Тут создаем метку с нужными координатами и всякими настройками.
В случае создания компонентов или модулей зацикливать нужно именно эту часть.

myPlacemark0 = new ymaps.Placemark([55.752577,37.632134], { // Создаем метку с такими координатами и суем в переменную
        balloonContent: '
Заголовок метки 1
Немного инфы о том, о сем. Лорем ипсум чото там.
' // сдесь содержимое балуна в формате html, все стили в css
	}, {
	iconImageHref: 'img/icon1.png', // картинка иконки
	iconImageSize: [64, 64], // размер иконки
	iconImageOffset: [-32, -64], // позиция иконки
	balloonContentSize: [270, 99], // размер нашего кастомного балуна в пикселях
	balloonLayout: "default#imageWithContent", // указываем что содержимое балуна кастомная херь
	balloonImageHref: 'img/ballon1.png', // Картинка заднего фона балуна
	balloonImageOffset: [-65, -89], // смещание балуна, надо подогнать под стрелочку
	balloonImageSize: [260, 89], // размер картинки-бэкграунда балуна
	balloonShadow: false
});
/* Добавляем метки на карту */
myMap.geoObjects
	.add(myPlacemark0);

Каждый такой кусок отвечает за одну кастомную метку, поэтому чтобы добавить несколько меток — повторяем этот кусок сколько нужно раз, естественно меняя название переменной myPlacemark0 на что-то другое.

ДЕМО ПРИМЕР

Примечания

• Вот тут есть куча классных примеров по работе с Яндекс.картами и один из них был использован в этой статье.
• Вот тут тоже куча наглядных примеров, стоит посмотреть.

Вот и все, мы сделали яндекс карту с несколькими уникальными метками, с собственным контентом балунов, стилем и даже своей кнопкой закрыть используя API 2.0

UPD: Существует проблема с неверным подсчетом позиции кастомного балуна, т.е. в каких то частях карты балун открывается за пределами карты, что не красиво и не ок. Эту проблему я решил принудительной центровкой карты на координатах открытого балуна с помощью panTo:

1) Сначала к настройкам балуна метки карты надо добавить balloonAutoPan: false — чтобы выключить автоматическое кривое выравнивание.

2) Теперь при событии balloonopen возьмем координаты метки и вызовем panTo:

/* Фикс кривого выравнивания кастомных балунов */
myMap.geoObjects.events.add([
	'balloonopen'
	], function (e) {
	var geoObject = e.get('target');
	myMap.panTo(geoObject.geometry.getCoordinates(), {
		delay: 0
	});
});

Как это работает можете посмотреть в примере выше.

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