Как сделать сайт самому
Главная
Вход
Регистрация
Суббота, 28 Января 2023, 13:23Приветствую Вас Гость | RSS
Меню сайта

Полезные ссылки

Партнерки

Продвижение сайта
Регистрация сайта в каталогах, раскрутка и оптимизация сайта, контекстная реклама

Главная » 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-ключа такую строчку:

map.openBalloon(new YMaps.GeoPoint(131.895088, 43.115121), 'ул.Лазо,6-Б', {hasCloseButton: false, maxWidth:85})}

В этой строке заменяете слова на кнопке, и если они плохо смотрятся, нужно увеличить/уменьшить длину с 85 пикселей до нужной. Чтобы вставит скрипт на страницу, переключаетесь в режим HTML.

Как это выглядит в результате можно посмотреть здесь

Если есть желание сделать все еще красивее (вид со спутника, схема проезда и т.д.), то осваиваете всю документацию по API самостоятельно.

Регистрация и получение API- ключа - http://api.yandex.ru/maps/form.xml
Определение координат - http://api.yandex.ru/maps/tools/getlonglat/
Просмотров: 8653 | Добавил: lnp | Теги: ЯндексКарты, API-ключ, интерактивная карта на сайте | Рейтинг: 0.0/0
Учебник по uCoz

Друзья сайта

Поиск

Форма входа

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0


Copyright "Как сделать сайт самому в конструкторе uCoz" © 2007-2023