Быстрый старт

Ниже приведены инструкции, как показать на странице простую карту.

Внимание

API-ключ — обязательное условие использования бесплатной версии API Яндекс Карт.

Шаг 1. Получите API-ключ

Зайдите на страницу Кабинета Разработчика и нажмите кнопку Получить ключ. Во всплывающем окне выберите сервис «JavaScript API и HTTP Геокодер».

После заполнения формы появится надпись «Сервис успешно подключен». Созданный ключ будет доступен в разделе «Ключи». Его необходимо использовать в дальнейшем при подключении API.

Примечание

Ключ будет активирован в течение 15 минут после получения.

Шаг 2. Подключите API

Добавьте в заголовок head HTML-страницы строку следующего вида:

<head>
    <script src="https://api-maps.yandex.ru/2.1/?apikey=ваш API-ключ&lang=ru_RU" type="text/javascript">
    </script>
</head>

Подробнее о подключении API

Шаг 3. Создайте контейнер для карты

Создайте видимый контейнер ненулевого размера, в котором будет размещена карта. В качестве контейнера может использоваться любой HTML-элемент блочного типа (например, элемент div). Карта заполнит этот элемент полностью.

<body>
    <div id="map" style="width: 600px; height: 400px"></div>
</body>

Уникальный идентификатор контейнера (в примере это id="map") будет использоваться в следующем шаге для получения указателя на контейнер карты.

Шаг 4. Создайте карту

В JavaScript-коде создайте экземпляр карты. Конструктору нужно передать:

идентификатор 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. Это нужно, чтобы к нему можно обращаться по 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>

С примерами можно ознакомиться в песочнице.