Как вставить яндекс карты на сайт — Блог Ильи Житенёва (БЖ)

Для начала вам нужно получить API-ключ — он необходим для работы с API карт. Это будет ваш «пропуск» к картам. Тут есть одна не очень приятная особенность — ключ не будет работать на локальной машине, т.к. при его получении нужно указать сайт, на котором будет использована карта..

После получения ключа вам нужно будет «подсоединиться» к api, расположив внутри тэга <head> вашей страницы, где будет отображаться карта, следующий код (замените «хттп» на «http»)

<script src="хттп://api-maps.yandex.ru/1.1/index.xml?key=API-ключ" type="text/javascript"></script>

Затем необходимо создать контейнер для карты — слой, в который и будет загружена карта. Представленный ниже код создаст контейнер размером 600х400 пикселей. Однако, лучше присвоить ему какой-нибудь класс и задавать размеры через css, а не через свойство style.

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

Теперь, подключившись к API и имея в нашем распоряжении контейнер, куда мы можем загрузить карту — приступаем к загрузке. Для этого, необходимо разместить следующий фрагмент кода внутри тэгов , но после кода подключения к 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>

Где «37.64, 55.76» — координаты центра карты, в данном случае центр будет на Красной Площади, а 10 — коэффициент масштаба, изменяемый от 1 (карта мира) до 17 (максимальное приближение).

Как видите, добавить на сайт яндекс карты очень просто! В следующем посте поговорим о такой штуке, как геокодер и научимся определять местоположение пользователя. Зачем это может быть надо? Например для каталогов вакансий. Когда на ваш сайт зайдёт некий Василий из Могилёва — вы поможете ему быстрее найти работу в Могилеве, показав вакансии только в его городе. Не плохое улучшение юзабилити, правда?

Если у вас возникли какие-либо трудности или вопросы — отписывайтесь в комментариях к данному посту — я обязательно на них отвечу!