Быстрый старт
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
:
-
Создайте с помощью оператора
new
новый экземпляр базового класса YMaps.Map:var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
Примечание
На веб-странице каждый экземпляр этого класса представляет одну карту.
-
Задайте с помощью метода
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 Яндекс.Карт. Если готового ответа не нашлось, то задайте вопрос экспертам клуба.
- Отправьте нам сообщение с описанием проблемы, заполнив форму обратной связи.