Зачем нужны интерактивные карты
До сих пор размещали на странице статичные элементы: текст, картинки, формы. Но посмотрите на секцию «Контакты» ADC. Под сеткой с телефонами и адресами видите интерактивную карту? Можете перемещаться, увеличивать масштаб, кликать на маркер. Это не картинка, это живая Яндекс Карта, встроенная прямо в страницу.
Карты помогают посетителям найти физическое местоположение. Адрес «Пантелеевская, 53» понятен москвичам, но что если человек из другого города? Карта покажет точное место, можно построить маршрут, посмотреть окрестности. Это удобнее статичной картинки.
Яндекс предоставляет API для встраивания карт. API — это набор инструментов, который позволяет использовать сервисы Яндекса на вашем сайте. Вы подключаете скрипт, пишете несколько строк кода, карта появляется на странице. Без API пришлось бы создавать карту с нуля, прорисовывать улицы, здания, маршруты. С API получаете всё готовое.
Получение API-ключа
Сначала нужен API-ключ. Это уникальный идентификатор, который подтверждает, что вы имеете право использовать API. Откройте браузер, зайдите на developer.tech.yandex.ru. Перейдите в раздел «JavaScript API и HTTP Геокодер». Нажмите «Получить ключ». Зарегистрируйтесь или войдите через Яндекс ID. Создайте ключ, скопируйте его.
Ключ выглядит как длинная строка символов: abc123def456ghi789. Храните его безопасно. Не публикуйте в открытом доступе. Для учебных проектов это не критично, но для реальных сайтов важно.
Подключение API к странице
Теперь подключите API к странице. Откройте index.html. В секции <head> добавьте скрипт:
<head>
<meta charset="UTF-8" />
<title>ADC</title>
<link rel="stylesheet" href="style.css" />
<script
src="https://api-maps.yandex.ru/2.1/?apikey=ВАШ_API_КЛЮЧ&lang=ru_RU"
type="text/javascript"
></script>
</head>Замените ВАШ_API_КЛЮЧ на скопированный ключ. lang=ru_RU устанавливает русский язык интерфейса карты.
Создайте контейнер для карты в HTML. В секции контактов после сетки добавьте:
<div class="contacts-grid">
<!-- Блоки с контактами -->
</div>
<div id="map" class="map-container"></div>ID map нужен, чтобы JavaScript нашёл этот элемент и поместил туда карту. Класс map-container для стилизации.
В CSS задайте размеры контейнера:
.map-container {
width: 1048px;
height: 500px;
margin-top: 64px;
}Инициализация карты
Теперь JavaScript. Откройте script.js. Напишите код инициализации карты:
// Функция инициализации карты
function initMap() {
// Создаём карту
const map = new ymaps.Map("map", {
center: [55.787300, 37.641764], // Координаты центра карты, наше адрес
zoom: 16 // Масштаб карты
});
// Создаём метку на карте
const placemark = new ymaps.Placemark([55.787300, 37.641764], {
balloonContent: "НИУ ВШЭ, ADC<br>Пантелеевская, 53"
}, {
preset: "islands#redIcon" // Красная иконка
});
// Добавляем метку на карту
map.geoObjects.add(placemark);
}
// Ждём загрузки API Яндекс Карт
ymaps.ready(initMap);ymaps.ready(initMap) ждёт, пока API загрузится, затем вызывает функцию initMap. Без этого код выполнится раньше, чем API будет готов, и выдаст ошибку.
new ymaps.Map('map', {…}) создаёт карту внутри элемента с ID map. Передаёте настройки: center — это координаты центра, zoom — это масштаб от 0 (весь мир) до 19 (детализация зданий).
Координаты [55.787300, 37.641764] — это широта и долгота Пантелеевской, 53. Как узнать координаты? Откройте Яндекс Карты, найдите адрес, кликните правой кнопкой, выберите «Что здесь?». В левом меню появятся координаты. Скопируйте их.
new ymaps.Placemark([…], {…}, {…}) создаёт маркер на карте. Первый параметр координаты маркера. Второй параметр свойства: balloonContent — это текст во всплывающем окне при клике на маркер. Третий параметр опции: preset — это стиль иконки.
map.geoObjects.add(placemark) добавляет маркер на карту. Без этой строки маркер создан, но не виден.
Сохраните файлы. Обновите страницу. Видите карту? Видите красный маркер на Пантелеевской, 53? Кликните маркер, появляется окно с текстом «НИУ ВШЭ, ADC». Можете перемещать карту, увеличивать масштаб. Это полноценная интерактивная карта.
Настройка управления картой
Можете настроить управление картой. Например, отключить прокрутку колесом мыши, чтобы при скролле страницы случайно не зумировать карту:
const map = new ymaps.Map("map", {
center: [55.787300, 37.641764],
zoom: 16,
controls: ["zoomControl"] // Только кнопки зума
}, {
scrollZoom: false // Отключить зум колесом
});controls: ['zoomControl'] оставляет только кнопки зума, убирает остальные элементы управления. scrollZoom: false запрещает зум колесом мыши.
Изменение стиля маркера
Можете изменить стиль маркера. Яндекс предоставляет несколько готовых стилей:
const placemark = new ymaps.Placemark([55.787300, 37.641764], {
balloonContent: "НИУ ВШЭ, ADC<br>Пантелеевская, 53"
}, {
preset: "islands#darkGreenIcon" // Тёмно-зелёная иконка
});Доступны цвета: red, darkOrange, yellow, green, darkGreen, blue, lightBlue, violet, pink, gray, black. Для ADC подойдёт зелёный, в тон дизайну.
Можете использовать свою иконку. Загрузите SVG или PNG, укажите путь:
const placemark = new ymaps.Placemark([55.787300, 37.641764], {
balloonContent: "НИУ ВШЭ, ADC<br>Пантелеевская, 53"
}, {
iconLayout: "default#image",
iconImageHref: "pictures/marker-icon.svg",
iconImageSize: [40, 40],
iconImageOffset: [-20, -40]
});iconImageHref — путь к файлу иконки. iconImageSize — размеры иконки. iconImageOffset — смещение, чтобы острие маркера указывало точно на координаты.
Основные принципы работы с API
Запомните главное. Яндекс Карты подключаются через API-ключ. Скрипт в <head>, контейнер с ID в HTML, код инициализации в JavaScript. ymaps.ready() ждёт загрузки API. ymaps.Map() создаёт карту. ymaps.Placemark() создаёт маркер. Координаты в формате [широта, долгота]. balloonContent добавляет текст в окно маркера.
Для чего нужна функция ymaps.ready()?
В каком формате указываются координаты в Яндекс Картах?
Что можно настроить при создании карты?
Документация Яндекс.Карты API