Начало работы с API
JavaScript API Яндекс.Карт — это набор JavaScript-компонентов, позволяющий размещать на страницах сайта интерактивные карты.
Для того чтобы вставить карту на страницу и разместить на ней объект (например, метку), выполните описанные ниже действия.
Шаг 1. Получите API-ключ
Зайдите на страницу Кабинета Разработчика и нажмите кнопку Получить ключ. Во всплывающем окне выберите сервис «JavaScript API и HTTP Геокодер».
После заполнения формы появится надпись «Сервис успешно подключен». Созданный ключ будет доступен в разделе «Ключи». Его необходимо использовать в дальнейшем при подключении API.
Шаг 2. Подключите API
Прежде чем использовать функции API, необходимо загрузить в браузер JavaScript-файлы, в которых эти функции определены. Для этого добавьте в заголовок head
HTML-страницы строку следующего вида:
<head>
...
<script src="https://api-maps.yandex.ru/2.0-stable/?apikey=ваш API-ключ&load=package.standard&lang=ru-RU" type="text/javascript"></script>
...
</head>
По адресу api-maps.yandex.ru/2.0-stable/ находится загрузчик, который при обращении к нему подключает нужные компоненты API.
Шаг 3. Создайте контейнер для карты
Создайте видимый контейнер ненулевого размера, в котором будет размещена карта. В качестве контейнера может использоваться любой HTML-элемент блочного типа (например, элемент div
с заданной шириной и высотой). Карта заполнит этот элемент полностью.
<body>
<div id="map" style="width: 600px; height: 400px"></div>
</body>
Уникальный идентификатор (id
) контейнера будет использоваться в следующем шаге для получения указателя на контейнер карты.
Шаг 4. Создайте карту
Создайте экземпляр класса карты, в конструкторе которого укажите id контейнера, ее центр и коэффициент масштабирования.
<script type="text/javascript">
var map = new ymaps.Map ("map", {
center: [55.76, 37.64],
zoom: 7
});
</script>
Для того чтобы не определять координаты центра карты вручную, воспользуйтесь инструментом Определение координат.
Создавать карту следует после того, как веб-страница загрузится целиком. Это даст уверенность в том, что контейнер для карты создан и к нему можно обращаться по id
. Чтобы инициализировать карту после загрузки страницы, можно воспользоваться функцией ready().
Функция ready вызовется тогда, когда API будет загружен и DOM сформирован:
<script type="text/javascript">
ymaps.ready(init);
var myMap;
function init(){
myMap = new ymaps.Map ("map", {
center: [55.76, 37.64],
zoom: 7
});
}
</script>
Шаг 5. Добавьте метку на карту
В API метки реализуются с помощью класса Placemark
. Перед тем как добавить метку на карту, создайте экземпляр этого класса. При создании метки вы можете задать текст её иконки, а также текст балуна, который откроется при нажатии кнопкой мыши на этой метке.
<script type="text/javascript">
ymaps.ready(init);
var myMap,
myPlacemark;
function init(){
myMap = new ymaps.Map ("map", {
center: [55.76, 37.64],
zoom: 7
});
myPlacemark = new ymaps.Placemark([55.76, 37.64], { content: 'Москва!', balloonContent: 'Столица России' });
}
</script>
После того как метка была создана, её можно добавить на карту. Добавление объектов на карту осуществляется через их добавление в глобальную коллекцию объектов карты myMap.geoObjects
:
<script type="text/javascript">
ymaps.ready(init);
var myMap,
myPlacemark;
function init(){
myMap = new ymaps.Map ("map", {
center: [55.76, 37.64],
zoom: 7
});
myPlacemark = new ymaps.Placemark([55.76, 37.64], {
hintContent: 'Москва!',
balloonContent: 'Столица России'
});
myMap.geoObjects.add(myPlacemark);
}
</script>
Результат
Полный текст примера:
<!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.0-stable/?apikey=ваш API-ключ&load=package.standard&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);
var myMap,
myPlacemark;
function init(){
myMap = new ymaps.Map ("map", {
center: [55.76, 37.64],
zoom: 7
});
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>
С примерами можно ознакомиться в песочнице.
Не получилось?
Если при работе с API возникли проблемы, выполните следующие действия:
- Поищите описание проблемы в Клубе Разработчиков API Яндекс.Карт. Если готового ответа не нашлось, задайте вопрос экспертам клуба.
- Отправьте нам письмо с описанием проблемы с помощью формы обратной связи.