В этой статье мы будем работать с Яндекс карты с 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 на что-то другое.
myMap.behaviors.disable('scrollZoom'); — отключить увеличение карты колесиком (отключить скролл на карте)
Вот и все, мы сделали яндекс карту с несколькими уникальными метками, с собственным контентом балунов, стилем и даже своей кнопкой закрыть используя 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
});
});