Как вставить яндекс карты на сайт

от

Доброго времени суток! В прошлой статье я поведал о том, как генерировать YMapsML файл с гео-данными для яндекс карт. Однако, не все имеют опыт работы с яндекс картами, поэтому сегодняшний пост я посвящу тому, как вставить карты на свой сайт, то есть, для тех кто никогда не работал с API ЯК.

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

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

<script src="http://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 (максимальное приближение).

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

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