Добавление карты на сайт

На сайте организации обычно указывается её адрес. Для удобства потенциальных клиентов, вместе с адресом располагается карта, на которой показано местонахождение организации. Можно сделать скрин карты в подходящем масштабе и создать обычное изображение. Но сайт выглядит гораздо интереснее и солиднее, если добавить на него Яндекс карты или Google maps.

У Яндекс карт есть только один недостаток - они не поддерживаются старыми браузерами. В остальном они лучше Гугла. Они содержат больше деталей, которые помогают лучше ориентироваться на карте. Из-за этого Яндекс карта загружается немного дольше, но это загрузка полезного контента. Кроме того, подключение карты делается проще. Поэтому Яндекс карты намного популярнее.

Добавление Яндекс карты

Разместить карту на своём сайте можно двумя способами: воспользоваться конструктором карт или использовать API Яндекса и написать скрипт самостоятельно. Для входа в конструктор нужен почтовый аккаунт на Яндексе. Карты, созданные в конструкторе, хуже поддерживаются браузерами, поэтому я рекомендую использовать второй способ. Он совсем несложный.

Создадим страницу и добавим на неё блок, в который будет загружаться карта. Этому блоку нужно задать атрибут id и установить размеры. По id будет определяться блок для карты.

HTML:

<div id="yandexmap" style="width: 500px; height: 500px"></div>

Для использования карты нужно подключить API Яндекс карт. Это выполняет следующий код:

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"
type="text/javascript"></script>

Добавьте этот код на созданную страницу.

Используя API Яндекса, пишем скрипт, добавляющий карту:

JavaScript:

let map;
function initMap ()
  {
  map = new ymaps.Map("yandexmap", {
    center: [56.039017, 92.894853],
    zoom: 16
    });
  }
ymaps.ready(initMap);

Поясню этот скрипт: карта создаётся внутри функции initMap(). В 20 строке функцию запускает метод ymaps.ready(). Это нужно, чтобы API загрузился до начала его использования.

Карту создаёт объект класса ymaps.Map. Нужно указать два параметра. В первом параметре указывается id блока, в который загружается карта. Второй параметр - это объект с настройками карты. Настройки такие:

Координаты центра указываются в массиве, содержащем два элемента: широта и долгота. Чтобы здание или другой объект располагался в центре карты, нужно указать координаты этого объекта. Координаты можно узнать следующим способом.

1. Открываете карту на сайте Яндекса
2. Находите нужный объект
3. Нажимаете на него
4. Появится окно, в котором будут координаты

Укажите в скрипте координаты нужного Вам объекта, и карта готова. Она должна отображаться на странице.

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

Важный объект на карте можно указать при помощи метки. Например, здание, в котором располагается Ваша организация. Это выглядит так:

Чтобы поставить метку, нужно создать переменную для объекта метки. Она должна быть объявлена на глобальном уровне, то есть, до функции initMap().

let marker;

Внутри функции initMap(), после создания карты нужно добавить такой код:

marker = new ymaps.Placemark([56.039017, 92.894853], {
  hintContent: 'Расположение',
  balloonContent: 'Это наша организация'
  });
map.geoObjects.add(marker);

Скрипт работает так: создаётся объект класса ymaps.Placemark. Указывается два параметра. В первом указываем координаты метки. Второй параметр - это объект с настройками метки. Можно указать такие настройки:

В 23 строке созданная метка добавляется на карту. У объекта карты есть метод geoObjects.add(), который добавляет на карту объекты. В нашем примере объект карты записан в переменную map. К ней применён этот метод.

Весь код скрипта, добавляющего карту с меткой, выглядит так:

let map;
let marker;
function initMap ()
  {
  map = new ymaps.Map("yandexmap", {
    center: [56.039017, 92.894853],
    zoom: 16
    });
  marker = new ymaps.Placemark([56.039017, 92.894853], {
    hintContent: 'Расположение',
    balloonContent: 'Это наша организация'
    });
  map.geoObjects.add(marker);
  }
ymaps.ready(initMap);

Если координаты центра и метки совпадают, то можно массив с координатами записать в переменную, а не писать каждый раз. Но метку можно поставить в любом месте. Тогда координаты нужно писать отдельно.