Главная » 2010 » Сентябрь » 9 » ЯндексКарты – вставляем интерактивную карту себе на сайт
ЯндексКарты – вставляем интерактивную карту себе на сайт
10:36
Недавно делала сайт для организации, где нужно было разместить карту, чтобы приезжие могли понять, где находится нужный адрес. Поскольку с определенного времени можно делать привязку сайта организации к определенному региону, то в Яндексе появился такой инструмент как API-ключ. В разделе Яндекс-Вебмастер при регистрации сайта Вы можете получить скрипт карты с изображением местности, где находится нужный объект. Но сначала нужно зарегистрироваться и получить API-ключ. Скрипт дается с координатами центра Москвы, которые легко заменяются на нужные вам. Где их взять? Заходите на Яндекс Карты в раздел «Определение координат», находите по адресу нужный Вам объект (город, улица, дом) и нажимаете кнопку справа «Получить координаты».
Например, координаты моей организации 131.895088, 43.115121. Соответственно, скрипт API-ключа выгляди вот так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Примеры. Знакомство с JavaScript API. Простой вызов карты.</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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("YMapsID")); map.setCenter(new YMaps.GeoPoint(131.895088,43.115121), 16); map.openBalloon(new YMaps.GeoPoint(131.895088, 43.115121), 'ул.Лазо,6-Б', {hasCloseButton: false, maxWidth:85})} </script> </head> <body> <div id="YMapsID" style="width:600px;height:400px"></div> </body> </html>
Для корректировки карты Вам нужно будет только изменить 2 позиции: - Ваш API-ключ - ваши координаты.
В полученный стандартный скрипт Вы можете вставить надпись, например, как это сделано у меня: надпись на кнопке: 'ул.Лазо,6-Б', длина надписи 85 пикселей. Для этого вставляете в стандартный скрипт API-ключа такую строчку:
В этой строке заменяете слова на кнопке, и если они плохо смотрятся, нужно увеличить/уменьшить длину с 85 пикселей до нужной. Чтобы вставит скрипт на страницу, переключаетесь в режим HTML.
Как это выглядит в результате можно посмотреть здесь
Если есть желание сделать все еще красивее (вид со спутника, схема проезда и т.д.), то осваиваете всю документацию по API самостоятельно.
