// Инициализация маркеров на карте
var markers_array = [];
markers_array=[{"id":'shops',"title":"Магазины","icon":"https://wingsapart.ru/wp-content/themes/wings/icons/shop.png","points":[
{"id":1,"title":"Супермаркет Народная 7Я семьЯ","description":"Супермаркет Народная 7Я семьЯ","position":[59.896890, 30.475905]},
{"id":2,"title":"Универсам Магнит","description":"Универсам Магнит","position":[59.896405, 30.476279]},
{"id":3,"title":"Магазин продуктов","description":"Магазин продуктов","position":[59.898889, 30.473968]},
{"id":4,"title":"Супермаркет Пятерочка","description":"Супермаркет Пятерочка","position":[59.900324, 30.479365]},
{"id":5,"title":"Супермаркет ОКЕЙ","description":"Супермаркет ОКЕЙ","position":[59.900432, 30.485651]},
{"id":6,"title":"Супермаркет Риомаг","description":"Супермаркет Риомаг","position":[59.901048, 30.470237]}, {"id":7,"title":"Супермаркет Пятерочка","description":"Супермаркет Пятерочка","position":[59.894050, 30.463996]}]},
{"id":'cafe',"title":"Кафе/Рестораны","icon":"https://wingsapart.ru/wp-content/themes/wings/icons/food.png","points":[
{"id":14,"title":"Пиццерия Telepizza","description":"Пиццерия Telepizza","position":[59.895210, 30.477535]},
{"id":15,"title":"Burger King","description":"Burger King","position":[59.895001, 30.492916]},
{"id":16,"title":"Пекарня/кофейня Цех 85","description":"Пекарня/кофейня Цех 85","position":[59.905789, 30.480834]},
{"id":17,"title":"Ресторан KillFish ","description":"Ресторан KillFish","position":[59.904045, 30.477722]},
{"id":18,"title":"Кондитерская ","description":"Кондитерская","position":[59.905184, 30.482953]},
{"id":19,"title":"Диско-бар Гризли ","description":"Диско-бар Гризли","position":[59.896961, 30.476940]},
{"id":20,"title":"Магазин суши Суши шоп ","description":"Магазин суши Суши шоп","position":[59.898303, 30.473112]}]},
{"id":'metro',"title":"Метро","icon":"https://wingsapart.ru/wp-content/themes/wings/icons/metro.png","points":[
{"id":53,"title":"М. улица Дыбенко","description":"М. улица Дыбенко","position":[59.906758, 30.482967]}]}
];
<div id="mesto1" class="mesto-section">
<div class="map-div">
<div class="map-menu-2">
<a href="#" class="map-btn-llink w-inline-block hh active" id="shops" data-target="1"><img src="<?=SPEC_IMAGES?>/icons/shop.svg" alt="" class="map-icn">
<div class="b-text w-hidden-tiny">Магазины</div>
</a>
<a href="#" class="map-btn-llink w-inline-block hh active" id="cafe" data-target="2"><img src="<?=SPEC_IMAGES?>/icons/food.svg" alt="" class="map-icn">
<div class="b-text w-hidden-tiny">Кафе/Рестораны</div>
</a>
</div>
</div>
<div class="html-embed w-embed w-iframe">
<script src="https://api-maps.yandex.ru/2.1/?apikey=344dbb9f-3d5f-4838-bf7f-10ee62eeefd3&lang=ru_RU"></script>
<div id="y_map" style="width: 100%; height: 600px"></div>
</div>
</div>
$(document).ready(function() {
var myMap,
placemarkList = {},
placemarkCollections = {};
ymaps.ready(function () {
myMap = new ymaps.Map('y_map', {
center: [59.894051, 30.462769],
zoom: 14,
controls: []
}, {
searchControlProvider: 'yandex#search'
}),
// Создаём макет содержимого.
MyIconContentLayout = ymaps.templateLayoutFactory.createClass('<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>');
jQuery.each(markers_array, function(i, group){
var groupCollection = new ymaps.GeoObjectCollection();
jQuery.each(group.points, function(i2,point){
myPlacemark = new ymaps.Placemark([point.position[0], point.position[1]],{
hintContent: point.title,
},{
// Опции.
// Необходимо указать данный тип макета.
iconLayout: 'default#image',
// Своё изображение иконки метки.
iconImageHref: group.icon,
// Размеры метки.
iconImageSize: [33, 38],
// Смещение левого верхнего угла иконки относительно
// её "ножки" (точки привязки).
// iconImageOffset: [-5, -38]
});
if (!placemarkList[group.id]) placemarkList[group.id] = {};
placemarkList[group.id][point.id] = myPlacemark;
// myMap.geoObjects.add(myPlacemark);
groupCollection.add(myPlacemark);
});
placemarkCollections[group.id] = groupCollection;
myMap.geoObjects.add(groupCollection);
});
myPlacemark = new ymaps.Placemark([59.894051, 30.462769],{},{
// Опции.
// Необходимо указать данный тип макета.
iconLayout: 'default#image',
// Своё изображение иконки метки.
iconImageHref: '<?=SPEC_IMAGES?>/icons/dom.png',
// Размеры метки.
iconImageSize: [90, 84],
// Смещение левого верхнего угла иконки относительно
// её "ножки" (точки привязки).
iconImageOffset: [-5, -38]
});
myMap.behaviors.disable(['scrollZoom']);
myMap.panes.get('ground').getElement().style.filter = 'grayscale(100%)';
myMap.geoObjects.add(myPlacemark);
});
$('.map-menu-2 a.hh').click(function(event) {
if($(this).hasClass('active')) {
$(this).addClass('inactive').removeClass('active');
myMap.geoObjects.remove(placemarkCollections[$(this).attr('id')]);
} else {
$(this).addClass('active').removeClass('inactive');
myMap.geoObjects.add(placemarkCollections[$(this).attr('id')]);
}
});
});