Клуб API Карт

МЕТКИ, yandex.API & Bootstrap

Пост в архиве.

Доброго времени суток!

Играюсь с метками, балунами и хинтами, а еще подцепил Bootstrap. Короче венегрет и каша.

Суть вопроса. Есть модальное окно (смотрим ниже) написанное с помощью Bootstrap.

Надо сделать так, что бы на клик метки вызывалось данное модальное окно. 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Название модали</h4>
            </div>
            <div class="modal-body">
                ...
</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">Сохранить изменения</button>
            </div>
        </div>
    </div>
</div>

Метка написана на JavaScript. Код метки ниже. 

var objectManager = new ymaps.ObjectManager();

    objectManager.objects.options.set('preset', 'islands#greenDotIcon');

    map.geoObjects.add(objectManager);

И еще. Данные для модали лучше бы брать из jSon файла. Ниже примерчик моего, но он настроен для стандартной метки yandex.API. 

 

{
"type": "FeatureCollection",

"features": [

{"type": "Feature", "id": 0, "geometry": {"type": "Point", "coordinates": [
55.751574, 37.573856]},
"properties": {"balloonContent": "Текст_1",
"hintContent": "Текст_2"}},

Заранее спасибо всем тем, кто поможет. Только прошу не кидаться данным ПРИМЕРОМ. Я там ничего не понял да и задачка у меня чуть сложнее будет.

Еще раз спасибо!

 

 

 

2 комментария

Можно отменить показ балуна, передав опцию hasBalloon: false

Подписаться на клик на objectManager.objects, и в обработчике открывать модальное окно

 

Суть вопроса. Есть модальное окно (смотрим ниже) написанное с помощью Bootstrap.
Надо сделать так, что бы на клик метки вызывалось данное модальное окно А можно по подробней об этом способе, если решилось