Быстрый старт
Совет
Перед началом использования Javascript API рекомендуется ознакомиться с тарифами.
Шаг 1. Получите API-ключ
Получите ключ для пакета «JavaScript API и HTTP Геокодер»
Примечание
Ключ будет активирован в течение 15 минут после получения.
JS API 3.0 работает только с ключами, у которых заполнено поле "Ограничение по HTTP Referer". Подробнее об ограничениях
Шаг 2. Подключите API
Создайте HTML-страницу и внутрь <head> добавьте тег <script>, который загрузит на страницу JS API.
<head>
...
<script src="https://api-maps.yandex.ru/v3/?apikey=YOUR_API_KEY&lang=ru_RU"></script>
...
</head>
Вместо YOUR_API_KEY подставьте ключ, полученный на шаге 1.
Шаг 3. Создайте контейнер
Внутрь <body> добавьте блочный элемент, например <div>. Важно задать элементу ненулевой размер, карта заполнит его полностью.
<body>
...
<div id="map" style="width: 600px; height: 400px"></div>
...
</body>
Примечание
Задавать контейнеру id="map", как это показано в примере, необязательно.
В примере мы использовали id, чтобы на следующем шаге инициализировать карту внутри этого контейнера. Но вы можете сделать это и без id, если передадите на следующем шаге ссылку на HTMLElement контейнера. Делайте так, как удобно вам.
Шаг 4. Инициализируйте карту
Любым удобным для вас способом подключите следующий js-код на страницу.
initMap();
async function initMap() {
// Промис `ymaps3.ready` будет зарезолвлен, когда загрузятся все компоненты основного модуля API
await ymaps3.ready;
const {YMap, YMapDefaultSchemeLayer} = ymaps3;
// Иницилиазируем карту
const map = new YMap(
// Передаём ссылку на HTMLElement контейнера
document.getElementById('map'),
// Передаём параметры инициализации карты
{
location: {
// Координаты центра карты
center: [37.588144, 55.733842],
// Уровень масштабирования
zoom: 10
}
}
);
// Добавляем слой для отображения схематической карты
map.addChild(new YMapDefaultSchemeLayer());
}
Примечание
Промис ymaps3.ready гарантирует, что все компоненты основного модуля Javasript API загружены, а DOM построен.
Для загрузки пакетов или модулей воспользуйтесь методом ymaps3.import.
Подробнее о параметрах инициализации карты
Шаг 5 (опционально). Настройте локальную разработку
Ограничение по HTTP Referer
- Зайдите в Кабинет разработчика.
- Выберите нужный вам ключ и нажмите Изменить.
- Пропишите
localhostв поле «Ограничение по HTTP Referer» и нажмите «OK».
Введенные ограничения начинают работать через 15 минут после заполнения формы.
Запуск локального HTTP-сервера
С помощью Node.js:
-
Установите Node.js.
-
Запустите команду
npx serveв том же каталоге, где находится HTML-файл. В ответ сервер выведет адрес сети и локального хоста. По умолчанию сервер будет запущен на порту http://localhost:3000.Пример вывода:
Serving! - Local: http://localhost:3000 - Network: http://192.168.0.111:3000 -
Перейдите по ссылке http://localhost:3000.
С помощью Python:
-
Установите Python.
-
Выполните команду
python -m http.serverв том же каталоге, где находится HTML-файл. В ответ сервер выводит сообщение об открытии HTTP-сервера на порту 8000.Пример вывода:
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ... -
Перейдите по ссылке http://localhost:8000/.
Полный текст примера
Загрузите эту страницу в браузере, и вы увидите карту.
<!DOCTYPE html>
<html>
<head>
<title>Быстрый старт. Размещение интерактивной карты на странице</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://api-maps.yandex.ru/v3/?apikey=YOUR_API_KEY&lang=ru_RU"></script>
<script>
initMap();
async function initMap() {
await ymaps3.ready;
const {YMap, YMapDefaultSchemeLayer} = ymaps3;
const map = new YMap(
document.getElementById('map'),
{
location: {
center: [37.588144, 55.733842],
zoom: 10
}
}
);
map.addChild(new YMapDefaultSchemeLayer());
}
</script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>