Для начала вам нужно получить 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 (максимальное приближение).
Как видите, добавить на сайт яндекс карты очень просто! В следующем посте поговорим о такой штуке, как геокодер и научимся определять местоположение пользователя. Зачем это может быть надо? Например для каталогов вакансий. Когда на ваш сайт зайдёт некий Василий из Могилёва — вы поможете ему быстрее найти работу в Могилеве, показав вакансии только в его городе. Не плохое улучшение юзабилити, правда?
Если у вас возникли какие-либо трудности или вопросы — отписывайтесь в комментариях к данному посту — я обязательно на них отвечу!