Как добавить div на Яндекс Карты рядом с меткой?

Question

[Гаджимари Качаев]

Я не особо знаком с JS, поэтому нужна помощь. Я хочу реализовать такое
.
С помощью конструктора Chrome, я переместил этот div изображенный на скрине в виде облака внутрь тега ymaps-point-overlay. Как добавить этот div через код? Использую версию Яндекс Карт 1.0. Добавляю карту через html. Изображенное на скрине облако, это не балун, который используется в ЯК, а просто картинка добавленная в div.

<div class="map">
    <script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=kVbhcu1s3Dkltv6kZpiPcnI8Iooz42jb&width=100%&height=500"></script>
    <div class="addressBox"></div>
</div>

Answer 1

[Гаджимари Качаев]

В общем проблему решил небольшим хаком. А именно, я не нашел в версии карт 1.0 события onLoad, поэтому воспользовался методом setTimeout после того как карта загрузилась, добавить div.

$(document).ready(function() {
    function addDiv() {
        var itemClass = "addressBox";
        $(".ymaps-point-overlay").append('<div class="' + itemClass + '"></div>');
    }

    setTimeout(addDiv, 5000);
});

Answer 2

[Артем Спиридонов]

Пожалуй, вопрос не в том, как этот див отобразить, а в том, как его позиционировать?

Я бы использовал абсолютное позиционирование, рассчитав и установив координаты посредством JS:

api.jquery.com/css
api.jquery.com/position
htmlbook.ru/css/position

Comments

[Гаджимари Качаев]

Я и так использую абсолютное позиционирование. Дело в том что карта адаптивная, т.е. ей задано значение width=100%. Поэтому когда я меняю размер окна браузера, у меня это облако, удаляется слишком далеко от метки. Поэтому думал добавить через JS или jQuery неподстредственно в тег где расположена метка.
$(document).ready(function() {
$(".ymaps-point-overlay").append("hello world");
});

Но событие ready не срабатывает для Яндекс Карт. Есть событие onload, но я не догнал, как его добавить. Карту я добавляю в конце body.

[Артем Спиридонов]

При изменении окна браузера нужно использовать соответствующее событие (window resize). Событие загрузки карты посмотрите в документации API.

Соответственно, на эти события вешайте обработчик - пересчитывающий координаты бокса.

Альтернативный вариант - делать чисто на CSS. Но тут нужно отталкиваться от вашей верстки, только так.

[Гаджимари Качаев]

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

[Артем Спиридонов]

Есть. Тег style. Как установить - см. первую ссылку из тех, которые я дал.

Как определить координаты - вторая ссылка.

На карту тоже можно. Но, если сложно - просто сделайте НАД картой. Как - третья ссылка.