JavaScript API Яндекс.Карт - это набор классов, позволяющий разместить интерактивную карту на странице сайта, добавить на карту необходимые элементы управления и расположить географические объекты.
Для того, чтобы вставить карту на страницу, выполните описанные ниже шаги.
Полученный ключ потребуется указать в HTML-коде веб-страницы, на которую планируется добавить карту.
API-ключ привязан к доменному имени, указанному в форме получения ключа, и вашему логину на Яндексе.
В качестве адреса сайта лучше указывать только домен (например, mydomain.com). Ключ, зарегистрированный на отдельный домен, будет действителен для всех URL внутри этого домена и для специальных поддоменов (например, для "www"). Таким образом, ключ, зарегистрированный на домен http://mydomain.com/, будет действителен для следующих URL:
http://mydomain.com/
http://www.mydomain.com/
http://www.mydomain.com/page/
http://host1.mydomain.com/
http://host2.mydomain.com/page/
На странице "Мои ключи" можно просмотреть список полученных ключей, проверить их статус или удалить ключи, которые больше не нужны.
Шаг 2. Загрузите API
Прежде чем использовать функции API его модули должны быть загружены в браузер. Для того, чтобы загрузить API добавьте скрипт загрузки в заголовок head HTML-страницы:
В примере скрипта указан URL, по которому доступна последняя версия API. Для того, чтобы загрузить API, требуется указать API-ключ, полученный на Шаге 1.
Если у сайта есть доменные зеркала, то для того, чтобы загрузка API работала одновременно и на страницах основного сайта, и на страницах зеркал в параметр key следует добавить API-ключи зеркал сайта через тильду (~):
В примере в качестве контейнера для карты использован HTML-элемент div. Его уникальный идентификатор (id) будет использоваться в следующем шаге для получения указателя на контейнер карты .
Шаг 4. Создайте карту
Создавайте карту после того, как веб-страница загрузится целиком. Это даст уверенность в том, что контейнер для карты создан и к нему можно обращаться по 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):
Подробнее о параметрах карты читайте в разделе Параметры карты.
Для того, чтобы не определять координаты центра карты вручную, воспользуйтесь инструментом "Определение координат".
Обработчик события 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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Примеры. Простой вызов карты.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==" 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-ключа.
