2

Здравствуйте.

Я хочу подключить на страницу яндекс карту, но у меня не получается отобразить метку на адресе. Вроде, смотрю на сайте яндекса Объекты на карте, кодов ошибок не дает, но метка не появляется.

Подскажите, пожалуйста, в чем ошибка?

var korolev_map;
var myPlacemark;

ymaps.ready(function(){
    korolev_map = new ymaps.Map("korolev", {
        center: [55.932374, 37.837965],
        zoom: 16
    });
    
    myPlacemark = new ymaps.Placemark([55.932374, 37.837965], {}, {
        preset: 'twirl#redIcon'
    });

    korolev_map.controls.add(new ymaps.control.ZoomControl());
});
ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  font-size: 0;
  margin: 0;
  padding: 0;
}

.contact-map {
  width: 50%;
  height: 300px;
  outline: 1px solid red; //для наглядности
}
<!DOCTYPE html>
<html>

<head lang="ru">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1" />
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
  </script>
</head>

<body>
  <section class="contacts">
    <ul>
      <li id="korolev" class="contact-map"></li>
      <li class="contact-map"></li>
      <li class="contact-map"></li>
    </ul>
  </section>
</body>

1 ответ 1

3

Вы забыли добавить ваши объекты в вашу карту, используя korolev_map.geoObjects.add:

var korolev_map, myPlacemark;

ymaps.ready(function() {
  korolev_map = new ymaps.Map("korolev", {
    center: [55.932374, 37.837965],
    zoom: 16
  });

  myPlacemark = new ymaps.Placemark([55.932374, 37.837965], {}, {
    preset: 'twirl#redIcon'
  });

  korolev_map.geoObjects.add(myPlacemark);
  korolev_map.controls.add(new ymaps.control.ZoomControl());
  korolev_map.behaviors.disable('scrollZoom'); 
});
ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  font-size: 0;
  margin: 0;
  padding: 0;
}

.contact-map {
  width: 50%;
  height: 300px;
  outline: 1px solid red; //для наглядности
}
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<section class="contacts">
  <ul>
    <li id="korolev" class="contact-map"></li>
    <li class="contact-map"></li>
    <li class="contact-map"></li>
  </ul>
</section>

5
  • Спасибо, только что тоже это нашел! 20 июл 2017 в 17:18
  • Не подскажите, как сделать так, чтобы карта меняла масштаб, только по кнопкам + -, а при скролле не работала? 20 июл 2017 в 17:20
  • @nazarukroman обновил ответ
    – Cheg
    20 июл 2017 в 17:22
  • Спасибо еще раз! И снова нашел ответ в тот момент, когда вы написали мне, спасибо! 20 июл 2017 в 17:23
  • @nazarukroman не за что)
    – Cheg
    20 июл 2017 в 17:24

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.