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

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

Для того чтобы вставить карту на страницу, выполните описанные ниже шаги.

Шаг 1. Загрузите API

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

<head>
...
<script src="https://api-maps.yandex.ru/1.1/index.xml" type="text/javascript"></script>
...
</head>

Примечание

В примере скрипта указан URL, по которому доступна последняя версия API.

Примечание

Для работы с JavaScript API 1.x ключи больше не нужны, то есть параметр key является необязательным. Форма получения нового ключа больше не доступна.

См. также
Загрузка API

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

Создайте контейнер для будущей карты, например, размером 600х400 пикселов. Размеры контейнера можно задать явно с помощью HTML-атрибута style:

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

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

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

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

Чтобы добавить карту на страницу, создайте обработчик события окончания загрузки страницы onLoad и разместите его в теге head после скрипта загрузки API:

<script type="text/javascript">
    // Создает обработчик события window.onLoad
    YMaps.jQuery(function () {
        // Создает экземпляр карты и привязывает его к созданному контейнеру
        var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);

        // Устанавливает начальные параметры отображения карты: центр карты и коэффициент масштабирования
        map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
    })
</script>

Совет

Для создания обработчика события onLoad и ссылки на DOM-элемент, служащий контейнером карты, удобно использовать встроенный в API фреймворк jQuery.

В обработчике события onLoad:

  1. Создайте с помощью оператора new новый экземпляр базового класса YMaps.Map:

    var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);

    Примечание

    На веб-странице каждый экземпляр этого класса представляет одну карту.

  2. Задайте с помощью метода setCenter() начальные параметры отображения карты: географические координаты центра карты (центр Москвы: 37.63, 55.75) и коэффициент масштабирования (10):

    map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);

    Подробнее о параметрах карты читайте в разделе Параметры карты.

    Совет

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

Обработчик события onLoad можно также реализовать стандартными методами JavaScript без использования jQuery:

<script type="text/javascript">
    window.onload = function () {
    // Создает экземпляр карты и привязывает его к созданному контейнеру
        var map = new YMaps.Map(document.getElementById("YMapsID"));

        // Устанавливает начальные параметры отображения карты: центр карты и коэффициент масштабирования
        map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
    };
</script>

Внимание

Если на странице уже есть обработчик стандартного события onload, то код для создания карты следует добавить в него.

Результат

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

<!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/1.1/index.xml" type="text/javascript"></script>
    <script type="text/javascript">
        // Создает обработчик события window.onLoad
        YMaps.jQuery(function () {
            // Создает экземпляр карты и привязывает его к созданному контейнеру
            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);

            // Устанавливает начальные параметры отображения карты: центр карты и коэффициент масштабирования
            map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
        })
    </script>
</head>

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

</html>

Для подробного изучения пример можно открыть в новом окне.

Что дальше?

  • В разделе Основы узнайте, как создать и удалить карту, как использовать параметры карты, как загрузить API.

  • В разделе Элементы управления ознакомьтесь с действиями, которые можно производить на карте с помощью элементов управления.

  • В разделе События изучите механизм событий API Яндекс.Карт.

  • В разделе Объекты-оверлеи на карте узнайте, какие объекты можно добавлять на карту, как изменять их внешний вид, объединять объекты в группы и удалять их с карты.

  • В разделе Сервисы ознакомьтесь с вспомогательными инструментами API: геокодером, маршрутизатором и визуализатором языка YMapsML.

  • В разделе Пользовательские карты узнайте, как с помощью API Яндекс.Карт создать пользовательскую карту, организовать навигацию по плану местности, фотографии или чертежу.

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

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

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