API Спутник/КартыJavaScript API Спутник/Карты

JavaScript API Спутник/Карты

Создание попапа для маркера

Попап - всплывающая плашка с информацией об объекте на карте. Попап привязывается к маркеру и изредка к точке на карте.

Первый способ сделать это:

<div id="map2" class="map"></div>
<script>
var map2 = L.sm.map('map2'); // создаем карту
var marker2 = L.sm.marker([55.85, 37.57]); // создаем маркер
var popupContent = '<div class="my-popup-title"><h3>Привет</h3></div>'+
    '<div class="my-popup-description">Я попап маркера. Меня можно открыть и закрыть.</div>'; 

marker2.addTo(map2);
marker2.bindPopup(popupContent); 
marker2.openPopup(); // откроем попап

setTimeout(function(){   
    marker2.closePopup();  // закроем попап через 5 секунд
}, 5000);

</script>

И более короткий способ, но без возможности управлять попапом в дальнейшем:

<div id="map1"></div>
<script>
var map1 = L.sm.map('map1'); // создаем карту
var marker1 = L.sm.marker([55.75, 37.8167], { // создаем маркер с раскрытым попапом
    popup: 'Привет!', // здесь может быть код HTML или DOM-элемент 
    popupOptions: {
        open: true 
    }
});
marker1.addTo(map1);
</script>

Документация прочих опций попапа здесь.

Пример на отдельной странице

Дополнительная информация