Как установить Яндекс Карты в блог

О том, что такое Яндекс Карты, большинство пользователей рунета имеет представление.
Если кто-то не знает, спросите у поисковика.
А вот то, что Яндекс при поисковом сканировании сайта, улыбается и одобрительно кивает головой, найдя кусочек "Яндекс Карт", где-нибудь на странице, знают далеко не многие.
Я считаю, что это служит основным стимулом выбрать яшин сервис среди прочих других для отображения в блоге или на сайте географической информации (например, карты проезда до любимого магазина с пончиками).

Помню, как когда-то я сканировал карту и редактировал её в фотошопе, чтобы потом выложить на сайте. Эти времена прошли, и карты сейчас обладают довольно занятными функциями, что у Яндекса, что у Гугла.

Для того, чтобы подключить Карты (maps) к себе в блог, нужно совершить несколько несложных мозго- и мыше- движений:

1) Генерация личного ключа на этой странице ↓

Вводите домен своего блога, получаете длиннющий хвост ключа и пример задействования api Яндес карт для своего блога.
Все полученные ключи находятся на специальной странице, ссылку на которую вы увидите ниже.

2) На той же страницы полезно будет сосредоточить внимание на примерах сервиса, чтобы иметь представление о том, как и куда эту технологию можно применить.

Для наглядности выкладываю демо, на которой вы можете увидеть Красную Площадь.

3) Подключаемся к api, используя сгенерированный ключ, который достался в первом шаге.:

<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ваш_ключ"
 type="text/javascript"></script>

Если вы разово планируете использовать карты, например, на статической странице в Blogger, то эту ссылку и два следующих кода поместите в тело сообщения. Для Wordpress и других CMS способ подключения, полагаю, не сильно отличается и однотипен.

Основная часть Карт Яндекса - это скрипт настроек. Он выдаётся на странице с примером, когда создаёте ключ.

<script type="text/javascript">
        window.onload = function () {
            var map = new YMaps.Map(document.getElementById("YMapsID"));
            map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
        }
    </script>

Из описания к Яндекс Картам (ссылка наверху) можно узнать, что необходимыми параметрами успешного запроса к серверу, являются координаты широты и долготы, и уровень масштаба, который рассчитывается от 1 (континенты) до 17 (отдельные здания).
Расшифровка:
-- var map = new YMaps.Map(document.getElementById("YMapsID")) - создаём js объект
-- map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10) - центрируем и задаём координаты цели (долгота 37.64, широта 55.76, масштаб 10)
Но это примитивный скрипт, потому что возможностей у Яндекс Карт намного больше.
Вот конфиг, используемый в демонстрации:

В котором я использовал метку и балун. Последний полноценно поддерживает html теги, что в целом даёт прекрасную возможность сделать карту бололее информативной и понятной, выделяя искомый объект красиво оформленным текстом.
С другими объектами для карты вы можете ознакомиться на этой странице документации.
Кстати, в качестве альтернативы new YMaps.GeoPoint, где мы указывали географические координаты для объекта, разработчики придумали Геокодер (map.getCenter), который указывается следующим образом:

var geocoder = new YMaps.Geocoder('119992, Москва,Ленинские горы , 1');

Читаем раздел документации об этом инструменте (геокодер).

4) Подключаем в блог, выводя в контейнер со строго заданными размерами:

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

5) Как узнать широту с долготой?
a) Из ссылки, после того, как сделаете запрос ↓

b) При помощи инструмента "получить информацию" ↓

c) При помощи "инструмента" (см. ниже ↓)


Сервис Яндекс Карты для облегчения работы вебмастера предлагает интересные инструменты:
a) Конструктор схем проезда ↓

В котором реализован трёхступенчатый мастер, и на выходе получается уже готовый код для установки на сайт или в блог...

С двумя типами карт:

Обратите внимание, что есть возможность сделать, читаемую в rss ленте, карту.

b) Определение координат - где для вышеописанных конфигов легко можно узнать широту с долготой того или иного объекта:

maps.yandex.ru