Добавление метки в Yandex Maps API

Question

Начал для общего образования изучать Yandex Maps API и столкнулся с проблемой, что у меня не добавляется метка на карту. Подскажите, пожалуйста, что у меня в коде не так.

initMap();
async function initMap() {
  await ymaps3.ready;
  const {
    YMap,
    YMapDefaultSchemeLayer,
    YMapMarker
  } = ymaps3;
  const map = new YMap(
    document.getElementById('map'), {
      location: {
        center: [37.589853, 55.733426],

        zoom: 15
      }
    }
  );
  map.addChild(new YMapDefaultSchemeLayer());

  const markerElement = document.createElement('div');
  markerElement.className = 'marker-class';
  markerElement.innerText = "I'm marker!";
  const marker = new YMapMarker({
      source: 'markerSource',
      coordinates: [37.589853, 55.733426],
      draggable: true,
      mapFollowsOnDrag: true
    },
    markerElement
  );
  map.addChild(marker);
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Yandex.Maps Template</title>
  <link href="https://getbootstrap.com/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
  <script src="https://api-maps.yandex.ru/v3/?apikey=some_api_key=ru_RU"></script>
</head>

<body>
  <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">SHP</a>
    <div class="navbar-nav">
      <div class="nav-item text-nowrap">
        <a class="nav-link px-3" target="_blank"
                   href="https://yandex.ru/dev/jsapi30/doc/ru/">Документация карт</a>
      </div>
    </div>
  </header>

  <main>
    <div class="container">
      <div class="row mt-3">
        <div class="col">
          <h1 class="h2">Карта</h1>
          <hr>
          <div id="map" style="height: 600px;"></div>
        </div>
      </div>
      <div class="row mt-3">
        <div class="col">
          <div class="d-grid gap-2">
            <button class="btn btn-primary" onclick=''>Add point</button>
          </div>
        </div>
      </div>
    </div>
  </main>
</body>
</html>

Answer 1

У вас в строке подключения API параметр lang написан неправильно, из-за этого карта не загружается. Должно быть так: <script src="https://api-maps.yandex.ru/3.0/?apikey=КЛЮЧ-API&lang=ru_RU"></script>

Для метки — не хватает слоя YMapDefaultFeaturesLayer, без него она просто не появится. Добавьте его перед созданием маркера: map.addChild(new YMapDefaultFeaturesLayer());

Также в YMapMarker параметр source: 'markerSource' здесь лишний, его можно убрать.

Полный исправленный код прикладываю в песочнице JSBin.

БЛОГ НА HUSL

Добавление метки в Yandex Maps API

Ответы (1 шт):