Комментариев 10Пошаговое руководство по монтажу Яндекс.Карт на сайте
Прежде чем взяться за написание этой статьи я довольно долго сомневался: может ли она быть кому-либо полезной, ведь достаточно подробное руководство по созданию Яндекс.Карт на сайте уже написано самими разработчиками… Тем не менее, вспоминая с какими трудностями довелось столкнуться мне самому при первых попытках монтажа Яндекс.Карт в одном из своих проектов, решился-таки написать эту самую пошаговую инструкцию, дабы помочь сэкономить время тем, кто привык его ценить.
Хочу отметить, что процедура монтажа Яндекс.Карт имеет очень много общего с аналогичным процессом для Google Maps, и, если вам когда-либо доводилось монтировать последние, то и настоящее руководство не вызовет у вас ни каких затруднений.
Итак…
1. Получение API-ключа
Для того, чтобы получить этот самый API-ключ, вы должны иметь аккаунт на Яндексе (Яндекс.Паспорт).
Если аккаунт уже имеется (или только что получен), авторизуйтесь в системе и затем заполните форму на получение API-ключа.
Важно! Адреса сайта с www и без – это разные адреса! Адрес с www – не что иное, как специальный поддомен основного адреса (того, который без www), потому рекомендую указывать именно основной, дабы API-ключ был действителен для всех страниц сайта, а не только для тех, к которым пользователь обратился через www.
На следующем шаге система сообщит вам тот самый ключик, а также предложит пример элементарного кода. Не спешите записывать этот ключик в файле, Яндекс предоставляет вам специальную страницу, содержащую сведения обо всех API-ключах, которые были вами зарегистрированы.
2. Монтаж Яндекс.Карты на сайт
Между тегами <head> и </head> той страницы вашего сайта, на которой вы намерены разместить карту, пропишите следующее:
<script src=http://api-maps.yandex.ru/1.1/index.xml?key=ВАШ_API_КЛЮЧ type="text/javascript"></script>
<script type="text/javascript">
// вызываем функцию, когда страница будет загружена
window.onload = function () {
// создаём переменную, и помещаем в неё нашу карту
var map = new YMaps.Map(document.getElementById("ВАШ_API_КЛЮЧ "));
// задаём координаты центра карты и значение масштаба карты, которое будет использовано по-умолчанию.
map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
}
</script>
В том месте страницы, в котором вы намерены установить Яндекс.Карту, вставьте следующий код:
<div id="ВАШ_API_КЛЮЧ" style="width:600px;height:400px"></div>
Здесь, с помощью значений свойств width и height, вы можете задавать размеры видимой области карты.
3. Определение координат центра карты
Для того, чтобы определить координаты точки, Яндекс предлагает нам инструмент «Определение координат».
Инструмент этот прост и понятен, потому дополнительные пояснения, думаю, тут излишни.
Кстати, для построения схемы проезда рекомендую воспользоваться другим, не менее простым и понятным сервисом «Конструктор схем проезда».
4. Добавление элементов управления Яндекс.Картой, меток и балунов
Подробно об элементах управления написано в Руководстве разработчика, я же лишь приведу примеры наиболее часто используемых элементов:
Инструменты управления:
map.addControl(new YMaps.TypeControl()); //добавляет переключатель типов карты map.addControl(new YMaps.ToolBar()); // добавляет панель инструментов map.addControl(new YMaps.Zoom()); // добавляет инструмент масштабирования map.addControl(new YMaps.MiniMap()); // добавляет мини-карту map.addControl(new YMaps.ScaleLine()); // добавляет линейку масштаба map.addControl(new YMaps.SearchControl()); // добавляет панель поиска
Метки и балуны
// создает метку в заданной геоточке
var placemark = new YMaps.Placemark(new YMaps.GeoPoint(39.000100, 45.036691));
placemark.setIconContent("Название точки");
// устанавливает содержимое балуна
placemark.name = "Заголовок балуна";
placemark.description = "Описание балуна";
// добавляет метку на карту
map.addOverlay(placemark);
А вот наглядный пример Яндекс.Карты со всеми вышеперечисленными элементами.
Конечно, этим возможности Яндекс.Карт не ограничиваются, но остальное – это, пожалуй, материал для уже совсем другой заметки. Я же лишь могу порекомендовать вам ознакомиться с подробным списком примеров возможностей Яндекс.Карт, приведённым в документации по JavaScript API Яндекса.
Комментарии