Вступление

Яндекс карты - самые использующиеся карты в нашей стране, оно и не мудрено. Очень многие сайты используют их у себя, потому что это удобно и работает. У карт от Яндекса неплохое API, хотя местами я хотел бы, чтоб его доработали :) Тем не менее, работать можно и весьма удобно. Поехали!

Что нужно для работы?

Для работы с картами нам нужно создать на сайте div с id="map". Это базовая разметка. Этому блоку нужно будет задать размеры для корректного отображения карты. Затем в скриптах подключаем Yandex API.

После подключения API нам доступны все его функции. В данный момент, мы подключили версию 2.1, но можно вполне работать и с 2.0.

Создание карты

ymaps.ready(init);
  var myMap;

  function init(){
    myMap = new ymaps.Map("map", {
      center: [55.76, 37.64],
      zoom: 7
    });
  }

Это так же базовая разметка, в которой "map" - это id нашего контейнера. цифры в переменной center - это определение центра карты. Найти нужный центр всегда можно в специальном Геокодере. Zoom - то значение, на которое наша карта изначально будет "отзумлена". Это значение также можно посмотреть в геокодере.

Усложняем задачу

Теперь вы знаете как создать простую карту, но как сделать маркер на ней? Весьма просто.

Помимо самой метки я добавил еще парочку изменений, о которых так же расскажу. Для начала, в самом верху мы добавляем переменную для маркера - myPlacemark. Именно с этой переменной мы и будем работать.

ymaps.ready(init);
  let myMap,
  myPlacemark;

function init(){
  myMap = new ymaps.Map("map", {
    center: [55.76, 37.64],
    zoom: 7,
    controls: ['zoomControl']
  });
  myMap.behaviors.disable('scrollZoom');
  myPlacemark = new ymaps.Placemark([57.01115476272839,40.974302929774815], {
    hintContent: 'Собственный значок метки',
    balloonContent: 'Это красивая метка'
  }, {
    iconLayout: 'default#image',
    iconImageHref: 'img/map-marker.png',
    iconImageSize: [54, 60],
    iconImageOffset: [-13, -53]
  });

  myMap.geoObjects.add(myPlacemark);
}

Как Вы могли заметить, у нас добавилась еще строчка controls: ['zoomControl']. Эта строка добавляет (если не было) на карту полоску скролла для зумминга карты. Очень удобно. myMap.behaviors.disable('scrollZoom');- отключение зумминга карты при скроллинге мышью. Очень важная функция, т.к. многие избавляются от зума при скролле мышью.

Ну наконец, мы доходим до самой метки. В квадратных скобках все те же координаты метки, которые так же можно узнать в геокодере. Удобно.

Переменная hintContent отвечает за текст, который будет показан при наведении на маркер. Переменная balloonContent - текст, который будет показан по нажатию. Туда можно и изображение сделать, если вы только захотите)

Далее - важная часть маркера - его внешний вид. Лично я не признаю встроенных в API видов маркера, поэтому это сразу опущу. Пройдемся по переменным: iconLayout - устанавливает картинку в качестве маркера iconImageHref - определяет путь до вашей пользовательской картинки iconImageSize - определяет размер маркера iconImageOffset - смещение маркера от центра.

Ну и последнее myMap.geoObjects.add(myPlacemark); - добавление геообъекта myPlacemark на карту myMap.

Заключение

Тема Яндекс.карт далеко не закончена. Обсудим их в следующих статьях!