Добавить на сайт карту от Yandex.Карты через API13.11.2011 19:24

Как добавить на свой сайт карту (проезда к офису, дому, магазину) от Яндекса. API довольно таки сложное. Простой вебмастер скорее всего не сможет разобраться в документации.

(Как быстро добавить карту на сайт, читайте в посте от 30.09.2010  )

Вот пошаговая инструкция:

1. Нужно получить уникальный ключ. Для этого нужно зарегистрироваться на Яндексе. Или войти, если уже есть Яндекс Паспорт.  Адрес входа/регистрации - http://passport.yandex.ru/passport?mode=passport

2. Зайти  по адресу http://api.yandex.ru/maps/ и перейти по ссылке Получите уникальный API-ключ - ввести адрес сайта, в ответ получите уникальный ключ. На экране также будет пример. Но он указывает на Москву, и там нет никаких объектов. А нам нужно показать метку на карте своего города. Сохраните ключ для дальнейшего использования. 

3.  Теперь обязательно получить координаты: места, которое мы хотим показать, а также центра карты. Для этого заходим на страницу http://api.yandex.ru/maps/tools/getlonglat/ и ищем нашу точку. Например, вводим в поле "найти" адрес: "Киев Якуба Коласа, дом 2". Если поиск успешный, увидите карту, домик и крестик посередине. Домик- это найденная точка, крестик- центр карты. Справа будет окошко, в котором отображаются координаты. Можно передвинуть карту и установить домик на нужный подъезд. У меня получилось: Координаты метки: 30.374253,50.433772, центр карты: 30.375112,50.433525. Масштаб карты- тоже важный параметр. Самое крупное увеличение- 16, самое малое - 1 (это весь мир :) ). По умолчанию сервис показывает 16. Нам эти данные понадобятся в дальнейшем.

4. Вставляем код. Он состоит из двух частей: вызов API, и блок, в котором будет выводиться карта. Вызов API делаем в заголовке страницы (между тэгами <HEAD> и </HEAD>):

<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ЗДЕСЬ ВАШ КЛЮЧ"
    type="text/javascript"></script>
<script type="text/javascript"> window.onload = function () {
var map = new YMaps.Map(document.getElementById("YMapsID"));
map.setCenter(new YMaps.GeoPoint(30.375112,50.433525), 15);
// Создание метки
var placemark = new YMaps.Placemark(new YMaps.GeoPoint(30.374253,50.433772));
// Установка содержимого значка метки
placemark.setIconContent('ICOM');
// Добавление метки на карту
map.addOverlay(placemark);
// добавление зума
map.addControl(new YMaps.Zoom()); }
</script>

Этот код будет показывать карту , а на ней метку с текстом "ICOM". Не забудьте вставить ваш ключ в том месте, где у меня записано ЗДЕСЬ ВАШ КЛЮЧ!

А вместо ICOM впишите название вашей компании. 

Теперь нужно расположить сам блок, в котором будет карта, в тексте страницы (обычно это страница "Контакты").

<div id="YMapsID" style="width: 600px; height: 400px">&nbsp;</div>

Где width: 600px;  - ширина блока (карты) , height: 400px - высота. Можно подобрать такие значения, чтобы карта выглядела красиво. 

id="YMapsID" - трогать нельзя, по умолчанию это идентификатор блока. 

 

Должно получиться что-то вроде этого:

<<< Как добавить на сайт карту Google
Сделать динамический баннер без FLASH >>>

Комментарии

1.
Никита 29.11.2011 08:47
Слишком сложно!
2.
Александр 29.11.2011 09:17
Да, это сложно, но возможностей на порядок больше, чем простым способом.
3.
Ника 02.04.2014 09:35
Спасибо большое! все ссылки в 1 месте. все понятно. все просто.
Балун и метку можно тоже настроить произвольным образом. у меня там свои иконки (метки) и фотки (балуны).
4.
Usik64 25.09.2014 13:49
Клас! Дуже допомогло. Корегував карту на http://svmuhsv.at.ua/index/kontakti/0-5
5.
Василий 28.11.2016 14:55
Убрал ключ из строчки ?key=ЗДЕСЬ ВАШ КЛЮЧ - все работает без ключа.

6.
Tester 12.01.2017 12:15
ну ещё бы, Василий ) ведь проверку ключей для v1.1 отключили в октябре 2014
https://yandex.ru/blog/mapsapi/52693

Добавление комментария

Имя:
Текст:
Введите цифры, изображенные на картинке
protect

Если вы хотите написать личное письмо- Обратная связь