Инициализация Яндекс.Карт

Если Вам понравился данный материал, поделитесь им с вашими друзьями в соц сетях

Создание контейнера для карты

В предыдущем материале Подключение JavaScript API Яндекс.Карт мы подключили JavaScript API Яндекс.Карт к нашей HTML-странице и рассмотрели дополнительные параметры, которые возможно использовать при подключении API Яндекс.Карт. Нашим следующим шагом будет создание карты (инициализация карты).

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

создадим HTML-страницу, выполним загрузку API и разместим видимый контейнер для карты с уникальным идентификатор id

<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--загружаем API-->
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
// ...
// код инициализации Яндекс.Карты
// ...
</script>
</head>
<body>
    <!--контейнер для карты-->
    <div id="map" style="width: 600px; height: 400px" ></div>
</body>
</html>

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

Создание карты (инициализация)

Пришло время создать экземпляр класса карты и отобразить его на HTML-странице. Во время инициализации карты, мы передадим в конструктор указатель на контейнер, а так же параметры центра ("center") и коэффициента масштабирования карты ("zoom").

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

Чтобы инициализировать карту после загрузки страницы, можно воспользоваться функцией ready(). Функция ready вызовется тогда, когда API будет загружен и DOM сформирован.

создаем карту

<script type="text/javascript">
var myMap;
// при успешной загрузке API выполняется соответствующая функция
ymaps.ready(function(){
    // создание экземпляра карты и его привязка к контейнеру с id="map"
    myMap = new ymaps.Map("map", {
        // центр карты
        center: [55.75396, 37.620393],
        // коэффициент масштабирования
        zoom: 8,
        // тип карты, по умолчанию используется тип карты "схема"
        //type: "yandex#map",
    });
}); // end ymaps.ready
</script>

или создаем карту так

<script type="text/javascript">
var myMap;
// при успешной загрузке API выполняется функция инициализации карты
ymaps.ready(init);

function init(){
    // создание экземпляра карты и его привязка к контейнеру с id="map"
    myMap = new ymaps.Map("map", {
        // центр карты
        center: [55.75396, 37.620393],
        // коэффициент масштабирования
        zoom: 8,
        // тип карты, по умолчанию используется тип карты "схема"
        //type: "yandex#map",
    });
}
</script>

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

загружаем API
размещаем на странице видимый контейнер, в котором будет размещен экземпляр карты
создаем глобальную переменную, в которую будет записан экземпляр карты, в нашем случае это var myMap;
с помощью оператора new создаем новый экземпляр базового класса YMaps.Map

В результате мы получил следующее:

Данные примеры описывают минимум, который необходим для инициализации Яндекс.Карт. В следующих материалах мы рассмотрим такие понятия как: параметры, поведения, элементы управления ...