Начало работы с API

JavaScript API Яндекс.Карт — это набор JavaScript-компонентов, позволяющий размещать на страницах сайта интерактивные карты.

Для того чтобы вставить карту на страницу и разместить на ней объект (например, метку), выполните описанные ниже действия.

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

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

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

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

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

Прежде чем использовать функции API, необходимо загрузить в браузер JavaScript-файлы, в которых эти функции определены. Для этого добавьте в заголовок head HTML-страницы строку следующего вида:

<head>
    ...
       <script src="https://api-maps.yandex.ru/2.0-stable/?apikey=ваш API-ключ&load=package.standard&lang=ru-RU" type="text/javascript"></script>
    ...
</head>

По адресу api-maps.yandex.ru/2.0-stable/ находится загрузчик, который при обращении к нему подключает нужные компоненты API.

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

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

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

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

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

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

Создайте экземпляр класса карты, в конструкторе которого укажите id контейнера, ее центр и коэффициент масштабирования.

<script type="text/javascript">
    var map = new ymaps.Map ("map", {
            center: [55.76, 37.64], 
            zoom: 7
        });
</script>
Совет. По умолчанию координаты принято задавать в последовательности «широта, долгота». Изменить порядок задания координат можно с помощью параметра coordorder при подключении API.

Для того чтобы не определять координаты центра карты вручную, воспользуйтесь инструментом Определение координат.

Создавать карту следует после того, как веб-страница загрузится целиком. Это даст уверенность в том, что контейнер для карты создан и к нему можно обращаться по id. Чтобы инициализировать карту после загрузки страницы, можно воспользоваться функцией ready().

Функция ready вызовется тогда, когда API будет загружен и DOM сформирован:

<script type="text/javascript">
    ymaps.ready(init);
    var myMap;

    function init(){     
        myMap = new ymaps.Map ("map", {
            center: [55.76, 37.64],
            zoom: 7
        });
    }
</script>

Подробнее о создании карты.

Шаг 5. Добавьте метку на карту

В API метки реализуются с помощью класса Placemark. Перед тем как добавить метку на карту, создайте экземпляр этого класса. При создании метки вы можете задать текст её иконки, а также текст балуна, который откроется при нажатии кнопкой мыши на этой метке.

<script type="text/javascript">
  ymaps.ready(init);
    var myMap,
        myPlacemark;

    function init(){
        myMap = new ymaps.Map ("map", {
            center: [55.76, 37.64],
            zoom: 7
        });

        myPlacemark = new ymaps.Placemark([55.76, 37.64], { content: 'Москва!', balloonContent: 'Столица России' });
    }
</script>

После того как метка была создана, её можно добавить на карту. Добавление объектов на карту осуществляется через их добавление в глобальную коллекцию объектов карты myMap.geoObjects:

<script type="text/javascript">
  ymaps.ready(init);
    var myMap,
        myPlacemark;

    function init(){     
        myMap = new ymaps.Map ("map", {
            center: [55.76, 37.64],
            zoom: 7
        });

        myPlacemark = new ymaps.Placemark([55.76, 37.64], { 
            hintContent: 'Москва!', 
            balloonContent: 'Столица России' 
        });

        myMap.geoObjects.add(myPlacemark);
    }
</script>

Подробнее об объектах карты.

Результат

Полный текст примера:

<!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.0-stable/?apikey=ваш API-ключ&load=package.standard&lang=ru-RU" type="text/javascript"></script>
    <script type="text/javascript">
        ymaps.ready(init);
        var myMap, 
            myPlacemark;

        function init(){ 
            myMap = new ymaps.Map ("map", {
                center: [55.76, 37.64],
                zoom: 7
            }); 
            
            myPlacemark = new ymaps.Placemark([55.76, 37.64], {
                hintContent: 'Москва!',
                balloonContent: 'Столица России'
            });
            
            myMap.geoObjects.add(myPlacemark);
        }
    </script>
</head>

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

</html>

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

Не получилось?

Если при работе с API возникли проблемы, выполните следующие действия:

  1. Поищите описание проблемы в Клубе Разработчиков API Яндекс.Карт. Если готового ответа не нашлось, задайте вопрос экспертам клуба.
  2. Отправьте нам письмо с описанием проблемы с помощью формы обратной связи.