Быстрый старт
Шаг 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());
}
Подробнее о параметрах инициализации карты
Полный текст примера
Загрузите эту страницу в браузере, и вы увидите карту.
<!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>
Примечание
Промис ymaps3.ready гарантирует, что все компоненты основного модуля Javasript API загружены, а DOM построен.
Для загрузки пакетов или модулей воспользуйтесь методом ymaps3.import.