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

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

  1. Подключите API
  2. Создайте контейнер для карты
  3. Создайте карту
  4. Добавьте метку на карту

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

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

<head>
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript">
    </script>
</head>

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

Внимание. API доступен по протоколу HTTPS.

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

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

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

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

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

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

В 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. Чтобы инициализировать карту после загрузки страницы, можно воспользоваться функцией ready(). Она вызовется тогда, когда API будет загружен и DOM сформирован.

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

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

Чтобы добавить метку на карту, создайте ее экземпляр. Конструктору следует передать:
  • координаты метки (обязательно);
  • опции, например цвет иконки, содержимое балуна и т. д.
Пример:
var myPlacemark = new ymaps.Placemark([55.76, 37.64], {
    // Хинт показывается при наведении мышкой на иконку метки.
    hintContent: 'Содержимое всплывающей подсказки',
    // Балун откроется при клике по метке.
    balloonContent: 'Содержимое балуна'
});

// После того как метка была создана, ее
// можно добавить на карту.
myMap.geoObjects.add(myPlacemark);

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

Результат

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

<!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/?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
            }); 
            
            var 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>

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