Нестандартный балун и стандартная метка

Для создания нестандартного балуна нужно задать стиль через специальную функцию.

Код Javascript(jQuery)
// Создания стиля для балуна
var style = new YMaps.Style();
style.balloonStyle = {template: new YMaps.LayoutTemplate(SampleBalloonLayout)};

// Создание стандартной метки с созданным стилем и добавление ее на карту
var placemark = new YMaps.Placemark(new YMaps.GeoPoint(37.64, 55.76), {style: style});
placemark.description = "Здесь можно разместить описание метки. Описание можно сделать в формате HTML";
map.addOverlay(placemark);

Где функция SampleBalloonLayout

Код Javascript(jQuery)
function SampleBalloonLayout() {
this.element = YMaps.jQuery(
"<div class=\"b-simple-balloon-layout\">\
<div class=\"content\"></div>\
<div class=\"close\"></div>\
<div class=\"tail\"></div></div>");


this.close = this.element.find(".close");
this.content = this.element.find(".content");

// Отключает кнопку закрытия балуна
this.disableClose = function(){
this.close.unbind("click").css("display", "none");
};


// Включает кнопку закрытия балуна
this.enableClose = function(callback){
this.close.bind("click", callback).css("display", "");
return false;
};


// Добавляем вид балуна на страницу
this.onAddToParent = function (parentNode) {
YMaps.jQuery(parentNode).append(this.element);
this.update();
};


// Удаляем вид балуна со страници
this.onRemoveFromParent = function () {
this.element.remove();
};


// Устанавливаем содержимое балуна
this.setContent = function (content) {
content.onAddToParent(this.content[0]);
};


// Обработка обновления
this.update = function () {
this.element.css("margin-top", this.getOffset().getY());
};

// Сдвигаем вид балуна относительно его точки позиционирования
this.getOffset = function () {
return new YMaps.Point(0, -this.content.height() - 45);
};


// Устанавливает максимально допустимый размер содержимого балуна
this.setMaxSize = function (maxWidth, maxHeight) {};
};

После этого необходимо создать стмлм

Код CSS
/* Внешний вид балуна (начало)*/
.b-simple-balloon-layout {
position: relative;
width: 150px;
padding: 10px;
margin-left: -10px;
border: 1px solid #848877;
background: #f8ffe0;
}
/* Внешний вид балуна (конец)*/

/* "Хвостик" балуна (начало)*/
.b-simple-balloon-layout .tail {
position: absolute;
width: 30px;
height: 24px;
margin-top: 10px;
background: url("http://api.yandex.ru/i/maps/tail.png") no-repeat;
}
/* "Хвостик" балуна (конец)*/

/* Кнопка закрытия балуна (начало)*/
.b-simple-balloon-layout .close {
position: absolute;
right: 0;
top: 0;
width: 13px;
height: 13px;
margin-right: 5px;
margin-top: 5px;
background: url("http://api-maps.yandex.ru/i/0.3/balloon/close.gif") no-repeat;
cursor: pointer;
}
/* "Кнопка закрытия балуна (конец)*/

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



Источник
Вверх