Яндекс карты — возможности и использование Yandex Maps для своих нужд

Да, еще у вас будет инструмент изменения масштаба (в верхнем левом углу), форма для ввода конкретного места, для которого нужно создать схему, а также возможность выбрать способ отображения из четырех вариантов: схема, гибрид, спутник и народная. О Народной карте и ее создании я говорил чуть выше, а вот так может выглядеть ваша схема при ее выборе (несколько аляписто, на мой взгляд):

После всех этих непосильных трудов вам только останется дать схеме название и нажать кнопку «Сохранить и получить код». Однако, вам на выбор будет предложено два варианта кода для вставки карты на свой сайт:

1. Интерактивная — ее код API придется вставлять в виде вызова скрипта, что может вызвать небольшие затруднения у начинающих, но зато посетители сайта смогут менять ее масштаб, перемещаться по ней и выбирать варианты отображения (спутник, схема и т.п.).

   Полученный код интерактивной карты Яндекса можно будет подогнать по размеру под ширину вашей страницы, просто поменяв цифирьки в его конце (715 пикселей, в моем случае):

   <script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=CFQ6uGHTgEElnjIHeZkCt8ySKv9DEJkG&width=715&height=450"></script>

2. Статическая — код API будет представлять из себя обычный тег IMG для вставки картинки на сайт, который не вызовет проблем ни при каких обстоятельствах, но зато схема будет представлять из себя просто фотку, которую нельзя ни масштабировать, ни двигать. Ширину и высоту статической схемы проезда опять же можно будет изменять прямо в коде.

   <img src="//api-maps.yandex.ru/services/constructor/1.0/static/?sid=8dq0AuCy924rvk5YN8zIpJuHRg2dPybP&width=600&height=443" alt=""/>

   

Как вставить Яндекс карту на сайт

В Вордпрессе вставить код интерактивной карты на сайт можно будет напрямую (в тексте статьи), если вы используете Html редактор при написании и редактировании публикаций (у меня, например, визуальный вообще не работает).

Правда, если вы переключитесь в визуальный, то он этот самый код со скриптом может потереть, поэтому будьте осторожнее, либо используйте для вставки карт от Яндекса короткие коды (или произвольные поля), как — опишу чуть ниже.

Итак, для начала на странице написания или редактирования статьи в Вордпрессе нажмите на расположенную в правом верхнем углу кнопку «Настройки экрана» и поставьте галочку напротив пункта «Произвольные поля»:

Под статьей появится область с одноименным названием, где вам нужно будет нажать на «Введите новое», после чего указать в левой форме идентификатор короткого кода (латиницей и без пробелов), в правую вставить код полученный в конструкторе Yandex Maps:

Теперь открываете ваш функциональный файл functions.php (живет он в папке с используемой темой оформления, а подробнее про его возможности читайте по приведенной ссылке).

Добавьте в него приведенный чуть ниже код (но с умом и предварительно сделайте бекап, а работу эту проводите не из админки Вордпресса, а подключившись к сайту по ФТП и открыв этот файлик в Нотепаде с плюсами):

function customscript_shortcode($atts, $text) {
global $post;
return get_post_meta($post->ID, $text, true);
}
@add_shortcode('customscript','customscript_shortcode');

После этого в статью или статическую страницу можно будет вставлять код, полученный в конструкторе Яндекс карт, с помощью такой вот конструкции, где вместо «yandexmap» вставьте используемый вами идентификатор:

Теперь вам не страшен визуальный редактор, который готов порезать все, что отличается от Html кода. Ура. Если нужно вставить схему проезда в каркас блога (хедер, сайдбар или футер), то скрипт туда можно вставлять напрямую, но нужно будет выбрать нужный шаблон темы Вордпресса, чтобы карта выводилась там, где вы хотите. Про назначение шаблонов читайте по приведенной ссылке.

Для вставки API карты с Яндекса на сайт под управление Joomla можно будет использовать все тот же модуль произвольного Html кода, но предварительно отключить визуальный редактор, чтобы код опять же не порезался им. После вставки редактор можно включить взад.

Если понадобится добавить код схемы проезда в статью на Joomla, то можно просто его вставить с отключенным визуальным редактором или же вставить содержимое модуля произвольного кода с помощью возможностей плагина Load Module.

В этом случае модуль с кодом карты от Яндекса нужно расположить в несуществующую позицию шаблона (банально набрать в поле выбора позиции в настройках модуля произвольного Html кода что-нибудь типа: yandex-karta). А затем, уже при написании или редактировании статей, вы сможете вставить в нужном месте конструкцию:

{loadposition yandex-karta}

Кстати, если вдруг этот способ у вас не работает, то зайдите в менеджер плагинов (из админки Joomla, выберете пункты меню «Расширения» — «Менеджер плагинов») и найдите, а затем активируйте «Content — Load Module». Он входит в стандартный комплект поставки Joomla, поэтому он у вас должен быть в обязательном порядке.

Вот, еще стоит сказать, что выдернуть схему и вставить ее на свой сайт можно и из упомянутых чуть выше «Моих карт». Помните, я там говорил, что можно получить ссылку на сохраненную схему, кроме этого можно было получить еще и YMapsML-файл, который запросто можно прикрутить к сайту, подключив предварительно к нему API.

Для подключения Апи Яндекса достаточно будет разместить между тегов head (найти их в случае Joomla или Вордпресс можно так же, как это было описано с статье про добавление фавикона на сайт) следующий вызов скрипта:

<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>

Ну, а в нужном месте (где должна вставляться и выводиться схема проезда) достаточно будет вставить:

<script type="text/javascript">?
ymaps.ready(function () {?
var map = new ymaps.Map('YMapsID', {?
center: [55.7, 37.5],?
zoom: 9,?
 behaviors: ['scrollZoom', 'drag']?
});??
//Необходимо подставить свой URL.?
 ymaps.geoXml.load("скопированная ссылка на YMapsML-файл")?
.then(function (res) {?
// Добавление загруженных из YMapsML-файла объектов на карту.?
map.geoObjects.add(res.geoObjects);?
 });?
});?</script>

Будем считать, что с созданием простейшей схемы проезда и вставкой ее на свой сайт, мы кое-как разобрались. Что же дальше? Наверное, стоит сказать пару слов о более сложных вариантах API Яндекс Карт, которые уже не подвластны упомянутому конструктору, но зато вполне по силам человеку знакомому с языком ДжаваСкрипт.

В этом случае перед вами открываются все возможности API Yandex Maps, которые описаны по приведенной ссылке. Там имеется вся необходимая документация, а девушка из этого ролика введет вас в курс дела:

Отлично, передайте эти материалы вашему программисту и он вам сварганит что-нибудь похожее на это (если в этом есть необходимость):

Как вставить Yandex Maps в Вордпресс и Joomla при помощи расширений

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

Список таких расширений можно найти на официальном сайте. Если рассматривать Вордпресс, то для него существует, по-моему, только один плагин под названием Yandex Maps for WordPress, который можно будет бесплатно скачать по указанной ссылке. Устанавливается и активируется он стандартным образом.

Единственно, что похоже он немного устарел и по-прежнему для своей работы требует ввода API ключа, о способе получения которого я писал чуть выше. Вводить этот ключ нужно будет на странице «Плагины» — «Yandex Maps». После этого на страницах создания или редактирования статей вы сможете найти внизу форму ввода данных для получения кода Яндекс Карты.

В верхнем поле вводите заголовок выноски, которая будет указывать на нужное место на схеме. Далее вводите адрес того места, куда будет смотреть стрелка указателя. Потом заполняете поле с описанием, задаете размеры вставляемой карты по горизонтали и вертикали, а так же ставите галочки, чтобы отображалась шкала изменения масштаба и выбора типа (схема, спутник и т.д.).

Потом переносите курсор (кликаете мышью) в то место статьи, где вы хотите вставить Яндекс карту и жмакаете по кнопке «Send Map To Editor». В результате получим что-то похожее на это:

Правда панелей с зумом и выбором типа карты нет, но в остальном все правильно. У меня показан скриншот с другого моего блога, ибо в этом возник небольшой конфликт с CSS стилями (по моей вине), который мне не захотелось сейчас исправлять.

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

1. Компонент и плагин Yandexmap
2. Компонент «Яндекс карты» для Joomla 3.0, 2.5 и 1.5!
3. Zh YandexMap