Яндекс карта – как добавить несколько точек

1. Подготовка HTML и CSS

Сначала создайте контейнер для карты и подключите API Яндекс Карт:

<div id="map"></div>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>

Зададим стили для корректного отображения:

#map {
  width: 100%;
  min-height: 500px;
}

2. Инициализация карты

Используем JavaScript для создания карты с центром в нужных координатах и заданным масштабом:

ymaps.ready(init);

function init() {
  const myMap = new ymaps.Map("map", {
    center: [58.957374, 31.340168], // Координаты центра
    zoom: 11, // Уровень масштабирования
    controls: [] // Убираем стандартные элементы управления
  });
}

• center – координаты центра карты (широта, долгота).

• zoom – уровень приближения (от 1 до 19).

3. Добавление меток с разными цветами

Добавим несколько точек и настроим их внешний вид:

function init() {
  const myMap = new ymaps.Map("map", {
    center: [58.957374, 31.340168],
    zoom: 11,
    controls: []
  });

  // Добавляем метки
  myMap.geoObjects
    .add(new ymaps.Placemark([58.95839, 31.34175], {
      balloonContent: 'Метка 1' // Всплывающая подпись
    }, {
      iconColor: 'red' // Цвет иконки
    }))
    .add(new ymaps.Placemark([58.92897, 31.3882], {
      balloonContent: 'Метка 2'
    }, {
      iconColor: 'blue' // Вторая метка другого цвета
    }));
}

• balloonContent – текст во всплывающем окне при клике.

• iconColor – цвет метки (доступны стандартные цвета: red, blue, green и др.).

4. Дополнительные настройки

Вы можете:

• Изменить иконку метки (preset: 'islands#icon').

• Добавить произвольный HTML в балун (balloonContentHeader, balloonContentBody).

• Группировать метки в кластеры для удобства.

Заключение

Теперь вы знаете, как создавать метки на Яндекс Карте, настраивать их цвет, положение и масштаб. Этот метод подходит для маркировки объектов, создания интерактивных карт и визуализации данных.