Как вставить Яндекс.Карту из Мои Карты в запись? Советы для WordPress.

Яндекс.КартыВ этой статье мы научились вставлять Яндекс.Карту в запись или страницу WordPress. В принципе, возможностей описанных в статье вполне достаточно для использования Яндекс.Карт на вашем Web сайте или блоге.

Однако, есть одно исключение: использование ваших карт из сервиса "Мои карты" Яндекс.Карт.  Простого способа их использования на вашем Web сайте или блоге в данный момент не существует. Способы, описанные в первой статье, не позволяют выводить такие карты.

После прочтения этой статьи вы сможете вставить Яндекс.Карту из "Мои карты" в запись или страницу сайта достаточно легко.

Рассмотрим его подробнее...

Чем хорош сервис "Мои карты" Яндекс.Карт?

Вы можете создавать свои карты, с своими метками и маршрутами, а также добавлять описания. Затем, Вы можете получить ссылку на карту и опубликовать её на своём Web сайте или блоге для публичного доступа.  Например, вот так: http://maps.yandex.ru/?um=nOZwpcMPVfz-na7wwv-OybX7xT55PX7e&l=map.

Ссылку на карту из "Моих карт" Яндекс.Карт разместить просто, с выводом самой карты всё несколько сложнее.

Решение задачи "Как вставить Яндекс.Карту из Мои Карты в запись?"

Переключитесь в редакторе WordPress в режим HTML и в нужное место страницы или записи WordPress вставьте этот код:

<div id="ymaps1" style="width: 600px; height: 300px;margin:20px 0;"></div>
<script type="text/javascript">// <![CDATA[
function loadymaps(ymaps) {
 var map = new ymaps.Map("ymaps1", {
 center: [44.997376, 53.1831879999978],
 zoom: 13,
 type: "yandex#map"
 });
 ymaps.geoXml.load("http://maps.yandex.ru/export/usermaps/nOZwpcMPVfz-na7wwv-OybX7xT55PX7e/")
 .then(function (res) {
 var bounds = res.mapState.getBounds();
 map.geoObjects.add(res.geoObjects);
 map.setBounds(bounds);
 },
 function (error) {
 });
 map.controls
 .add("zoomControl")
 .add("mapTools")
 .add(new ymaps.control.TypeSelector(["yandex#map", "yandex#satellite", "yandex#hybrid", "yandex#publicMap"]));
};
// ]]></script>
<script type="text/javascript" src="http://api-maps.yandex.ru/2.0-stable/?lang=ru-RU&coordorder=longlat&load=package.full&wizard=constructor&onload=loadymaps"></script>

В этом коде вам надо будет изменить следующее:
1) Вставить ссылку на YMapsML-файл своей карты вместо "http://maps.yandex.ru/export/usermaps/nOZwpcMPVfz-na7wwv-OybX7xT55PX7e/". Получить такую ссылку можно, нажав кнопку "Ссылка на эту карту" в "Моих Картах":

Получить ссылку на карту из Моих Карт Яндекс.Карт

2) Также можно изменить начальные координаты "center: [44.997376, 53.1831879999978]" на соотвествующие вашему местоположению на карте и убрать некоторые инструменты на карте - см. функции ".add".

В итоге, карта будет загружена из "Моих карт", выведена на вашем Web сайте и будет выглядеть примерно так:


Обратите внимание на метку и многоугольник. Эти элементы создал я в сервисе "Мои карты" Яндекс.Карт. Таких элементов может быть много и вы их создаёте сами!

[ads2]

Вроде бы всё: карта из "Моих Карт" вставлена в запись WordPress?

Да, но можно сильно упростить процесс вставки карты в тело записи, улучшить читабельность текста записи или страницы в редакторе WordPress, а также уменьшить глючность этого редактора, которая может проявиться после вставки в тело записи приведенного выше кода.

Интересно? Читайте следующую статью "Использование произвольных полей для вставки скриптов в тело записи".

0
Loading Disqus Comments ...

No Trackbacks.

Loading Facebook Comments ...