Это первый из серии уроков по программному интерфейсу (API) Яндекс.Карт. API позволяет создать карту, которая выглядит и работает в точности как на Яндексе. Но главное, что карту можно настроить: выбрать центр и масштаб, убрать ненужные функции или добавить дополнительные, показать на карте специальную информацию.
Мы начнём с основ, чтобы руководство было понятно без подготовки. В первом уроке создадим стандартную карту. Карты предназначены для размещения на веб-страницах, поэтому нам придётся кое-что узнать про инструменты, с помощью которых делают веб: HTML, CSS и JavaScript.
Немного про веб-страницы
Веб-страница — это текстовый файл. Его содержимое написано на языке гипертекстовой разметки (HyperText Markup Language, HTML). Внешний вид содержимого определяют стили, которые чаще всего записывают с помощью каскадных таблиц стилей (CSS, Cascading Style Sheets). Как содержимое себя ведёт — например, как реагирует на нажатия мышкой — запрограммировано на языке JavaScript. Карта — это один из элементов страницы, записанный с помощью HTML и запрограммированный на JavaSciript.
Приступим.
Создайте текстовый файл. Это можно сделать в любой программе, даже в «Блокноте» на Windows или в TextEdit на MacOS. Но я рекомендую сразу использовать специальные текстовые редакторы для работы с кодом, один из самых популярных — Sublime Text. Сохраните файл с расширением html, например index.html. Это стандартное название для главного html-файла. Когда браузер открывает сайт, он первым делом ищет index.html.
Веб-страница готова! Откройте index.html в браузере — правой кнопкой мыши и «Открыть в программе» или двойным щелчком. Страница пуста, но скоро мы это исправим. Заполните файл вот таким текстом:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя карта</title>
</head>
<body>
</body>
</html>
Теперь ваш файл — корректная веб-страница, в которой есть все необходимые элементы. Я не буду описывать каждый элемент, назначение некоторых из них станет ясно позднее.
От страниц к картам
Веб-страница готова, но карты на ней пока нет. Добавим. Для этого нужно сделать три вещи:
1) сообщить браузеру, где ему взять JavaScript-код, нужный для работы с картами
2) добавить карту как элемент на веб-страницу
3) скомандовать браузеру использовать загруженный код для создания карты
Добавим эти команды на страницу. Рядом с каждой я написал комментарии — это пометки, которые программисты оставляют друг для друга, браузер их игнорирует.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя карта</title>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> <!-- 1) указываем, откуда загрузить JS-код -->
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div> <!-- 2) добавляем элемент, в котором будет лежать карта -->
<script type="text/javascript">
ymaps.ready(function () {
var map = new ymaps.Map("map", {
center: [55.76, 37.64],
zoom: 7
});
})
</script> <!-- 3) отдаём инструкции на языке JavaScript: создать карту с определёнными параметрами -->
</body>
</html>
Что именно написано в этих инструкциях — мы разберём позднее. Обновите страницу. Если всё сделано верно, в браузере появится карта с центром в Москве. Эту карту можно перетаскивать и масштабировать, на ней работает поиск, пробки и спутниковые снимки. Страница готова к загрузке на на веб-сервер, где её увидят посетители вашего сайта.
В заключение
Вот приведённый выше пример на CodePen — сайте, на котором веб-разработчики экспериментируют и обмениваются кусочками кода. Но я призываю вас повторить действия самостоятельно.
Домашнее задание. Попробуйте разобраться, как изменить ширину и высоту карты, как выбрать другую стартовую точку и масштаб.
Спасибо за внимание. Ставьте пальцы вверх, подписывайтесь на канал в Дзене (кнопка наверху) и в телеграме, присылайте свои работы и вопросы на почту: webmax17@yandex.ru. До следующего урока!
update: Урок 2