Задать элементу "display: block" при клике на метку Яндекс карты
В массиве placemarks находится id элемента нужно при клике на метку отловить id и указать этому блоку display: block
<script type="text/javascript">
var placemarks = [
{
latitude: 42.32305190,
longitude: 69.60367965,
hintContent: 'Южно-Казахстанский областной музей жертв политических репрессий',
elem: 'elem-1'
},
{
latitude: 42.33461686,
longitude: 69.61848409,
hintContent: 'Областной Краеведческий музей Шымкент',
elem: 'elem-2'
},
{
latitude: 42.35426013,
longitude: 69.60287604,
hintContent: 'Этнографический музей «Кылует»',
elem: 'elem-3'
}
];
function init(ymaps) {
var map = new ymaps.Map("map", {
center: [42.33356603, 69.58876809],
controls: ['zoomControl'],
behaviors: ['drag'],
zoom: 12
});
myCollection = new ymaps.GeoObjectCollection();
placemarks.forEach(function (obj) {
myCollection.add(new ymaps.Placemark([obj.latitude, obj.longitude], {
hintContent: obj.hintContent,
},
{
iconLayout: 'default#image',
iconImageHref: '../images/maploop-red.png',
iconImageSize: [21, 28],
iconImageOffset: [-10.5, -28]
}));
myCollection.events.add('click', function (e) {
toggleActivePlaceMark(e.get('target'));
});
map.geoObjects.add(myCollection);
});
function toggleActivePlaceMark(placemark) {
if (myCollection.activeIndex !== undefined) {
myCollection.get(myCollection.activeIndex).options.set('iconImageHref', "../images/maploop-red.png");
myCollection.get(myCollection.activeIndex).options.set('iconImageSize', [21, 28]);
myCollection.get(myCollection.activeIndex).options.set('iconImageOffset', [-10.5, -28]);
}
if (placemark) {
myCollection.activeIndex = myCollection.indexOf(placemark);
placemark.options.set('iconImageHref', "../images/big-maploop.png");
myCollection.get(myCollection.activeIndex).options.set('iconImageSize', [45, 60]);
myCollection.get(myCollection.activeIndex).options.set('iconImageOffset', [-22.5, -46]);
}
}
}
</script>
<div class="guide-page__map" id="map"></div>
<div class="guide-page__item" style="display: block;" id="elem-1"></div>
<div class="guide-page__item" style="display: none;" id="elem-3"></div>
<div class="guide-page__item" style="display: none;" id="elem-2"></div>