Быстрый старт
Ниже приведены инструкции, как показать на странице простую карту.
Шаг 1. Получите API-ключ
Зайдите на страницу Кабинета Разработчика и нажмите кнопку Получить ключ. Во всплывающем окне выберите сервис «JavaScript API и HTTP Геокодер».
После заполнения формы появится надпись «Сервис успешно подключен». Созданный ключ будет доступен в разделе «Ключи». Его необходимо использовать в дальнейшем при подключении API.
Шаг 2. Подключите API
Добавьте в заголовок head
HTML-страницы строку следующего вида:
<head> <script src="https://api-maps.yandex.ru/2.1/?apikey=ваш API-ключ&lang=ru_RU" type="text/javascript"> </script> </head>
Скопировано
Шаг 3. Создайте контейнер для карты
Создайте видимый контейнер ненулевого размера, в котором будет размещена карта. В качестве контейнера может использоваться любой HTML-элемент блочного типа (например, элемент div
). Карта заполнит этот элемент полностью.
<body> <div id="map" style="width: 600px; height: 400px"></div> </body>
Скопировано
Уникальный идентификатор контейнера (в примере это id="map"
) будет использоваться в следующем шаге для получения указателя на контейнер карты.
Шаг 4. Создайте карту
- идентификатор HTML-контейнера;
- центр карты;
- коэффициент масштабирования.
Пример:
<script type="text/javascript"> // Функция ymaps.ready() будет вызвана, когда // загрузятся все компоненты API, а также когда будет готово DOM-дерево. ymaps.ready(init); function init(){ // Создание карты. var myMap = new ymaps.Map("map", { // Координаты центра карты. // Порядок по умолчанию: «широта, долгота». // Чтобы не определять координаты центра карты вручную, // воспользуйтесь инструментом Определение координат. center: [55.76, 37.64], // Уровень масштабирования. Допустимые значения: // от 0 (весь мир) до 19. zoom: 7 }); } </script>
Скопировано
id
. Чтобы инициализировать карту после загрузки страницы, можно воспользоваться функцией ready(). Она вызовется тогда, когда API будет загружен и DOM сформирован.Результат
Полный текст примера:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Быстрый старт. Размещение интерактивной карты на странице</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://api-maps.yandex.ru/2.1/?apikey=ваш API-ключ&lang=ru_RU" type="text/javascript"> </script> <script type="text/javascript"> ymaps.ready(init); function init(){ var myMap = new ymaps.Map("map", { center: [55.76, 37.64], zoom: 7 }); } </script> </head> <body> <div id="map" style="width: 600px; height: 400px"></div> </body> </html>
Скопировано
С примерами можно ознакомиться в песочнице.