Описание ситуации:
Есть много карт на одной странице, инициализируются они по клику.
Код вызова карты:
ymaps.ready(function () {
var map = {};
$('.js-map--trigger').click(function () {
var container = $(this).closest('.item').find('.js-map');
$('.js-map').css('height', '');
$(container).css('height', '300');
if ('destroy' in map) {
map.destroy();
}
map = new ymaps.Map(container[0], {
center: [55.753915313211486,37.62053621957395],
zoom: 10,
type: 'yandex#map',
flying: true
});
//забираю данные из data-ccords
var coordsFromDataAttr = $(this).data('coords');
//делаю из этого массив *хотя он уже представлен массивом, вот тут спорный момент, но начала отображаться хотя бы одна метка, но это кривое решения, насколько я понимаю
var coordsArr = $.makeArray(coordsFromDataAttr);
console.log(coordsFromDataAttr);
var coords = [
coordsArr
],
collection = new ymaps.GeoObjectCollection({}, {
preset: 'islands#redStretchyIcon'
});
for (var i = 0; i < coords.length; i++) {
collection.add(new ymaps.Placemark(coords[i]))
}
//пробовал откладывать добавление меток
setTimeout(function () {
map.geoObjects.add(collection);
}, 1000) ;
});
})
код в
<body>
в котором выводятся необходимые координаты
<ul>
<li class="item">
<div class="js-map">
</div>
<div><a href="javascript:void(0);" class="js-map--trigger" data-coords="[55.75, 37.50],[55.75, 37.71],[55.70, 37.70]">На карте</a><div>
</li>
</ul>
Здесь можно посмотреть работающий пример.
Заранее спасибо!
