Как можно отображать несколько карт Яндекса на одной странице с помощью JavaScript, изменяя координаты?

Как исправить скрипт для вывода нескольких карт на одной странице, чтобы избежать появления пустых карт?
  • 26 февраля 2024 г. 6:58
Ответы на вопрос 2
Для отображения нескольких карт Яндекса на одной странице с помощью JavaScript и изменения координат, можно использовать следующий подход:

1. Создайте несколько div элементов на странице, в которых будут отображаться карты:

```html
<div id="map1" style="width: 400px; height: 300px;"></div>
<div id="map2" style="width: 400px; height: 300px;"></div>
```

2. Для каждой карты создайте отдельный объект карты, указав координаты центра и масштаб:

```js
var map1 = new ymaps.Map("map1", {
    center: [55.753994, 37.622093], // координаты центра карты
    zoom: 10 // масштаб
});

var map2 = new ymaps.Map("map2", {
    center: [55.751999, 37.617734], // координаты центра карты
    zoom: 15 // масштаб
});
```

3. Для каждой карты привязать изменение координат к событию, например, при клике на кнопку:

```js
document.getElementById("btn1").addEventListener("click", function() {
    map1.setCenter([55.753994, 37.622093]);
});

document.getElementById("btn2").addEventListener("click", function() {
    map2.setCenter([55.751999, 37.617734]);
});
```

Чтобы избежать появления пустых карт, убедитесь, что у вас правильно подключена библиотека Яндекс.Карт и что у каждой карты есть уникальный id. Также убедитесь, что координаты центра и масштаб карты заданы корректно. Если карта все равно не отображается, перезагрузите страницу или проверьте консоль на наличие ошибок.
Вот так попробуйте 
var maps = [];
var placemarks = [];
let coordListMap2 = document.getElementsByClassName("contacts-title")
for(let i = 0; i < coordListMap2.length; i++) {
    (function(i) {
        ymaps.ready(function(){
            var mapId = 'map' + coordListMap2[i].dataset.id;
            maps[i] = new ymaps.Map (mapId, {
                center: [coordListMap2[i].dataset.coord],
                zoom: 10
            });
            placemarks[i] = new ymaps.Placemark([coordListMap2[i].dataset.coord], { 
                iconContent: 'Москва', 
                balloonContent: 'Столица России' 
            }, {
                preset: 'twirl#blueStretchyIcon'
            });
        });
    })(i);
}
Похожие вопросы