На страницах блога я уже рассказывал об использовании API 2GIS для размещения карты и справочника на свой сайт.
Но что делать, когда разместить справочник хочется, но нет возможности или желания подробно изучать API.
Для этого разработчики API 2GIS придумали хорошее решение — виджет 2GIS mini.
При переходе по ссылке, мы попадаем на страницу на которой нужно выбрать тип сайта, где мы хотим использовать виджет.
Конференции и ярмарки — Места, где можно поесть, поспать и переночевать возле места проведения мероприятий.
Гостиницы — Для сайтов гостиниц и хостелов. Показываются нужные фирмы вокруг.
Новостройки — Для сайтов домов и новостроек — вся инфраструктура рядом.
Города — Все самые важные рубрики вашего города.
Транспорт — Вокзалы, аэропорты, грузоперевозки.
Развлечения — Места города, где можно поесть, отдохнуть и развлечься.
Автолюбителям — Всё важное для любого автомобилиста: СТО, заправки, шиномонтаж.
Культура — Все культурные заведения: от библиотек до театров.
Свой виджет — Возможность самостоятельно сформировать любой набор рубрик.
Например, мы хотим создать карту со справочником ближайших мест для конференции «MasterInfoBiz-2013», которая пройдет в Москве с 18 по 21 октября 2013 года в гостинице «Салют» по адресу Ленинский проспект, д. 158.
Выбираем категорию «Конференции и ярмарки»
На новой странице вводим адрес
У меня сразу получился нужный город, чтобы изменить его нужно просто щелкнуть по названию и в появившемся списке выбрать нужный.
Мы можем отцентрировать и масштабировать карту, изменить размер окна с картой.
Также возможно показывать или не показывать адрес в виджете 2GIS mini.
Нажимаем кнопку «Готово», слева от карты появляется список с категориями.
Теперь, мы можем уже получить код для вставки на сайт или блог, нажав на кнопку «Получить код».
А можно изменить список со сферами деятельности, поменять цвет иконок и ссылок.
Я изменю цвет иконок и ссылок, аналогично основным стилям моего блога.
Щелкаем по ссылке «Изменить сферы деятельности».
Тогда мы получаем такой вид
Мы можем удалять рубрики или добавлять новые, а также изменять цвета для значков и ссылок.
Иконки я сделаю со значением цвета #696969, а ссылки — #62A6E4
Нажимаем кнопку «Готово», а затем «Получить код».
На следующей странице, мы должны принять Лицензионное соглашение.
Снова нажимаем «Получить код» и копируем, полученный код в Блокнот или Notepad++.
<a id="2gis_mini_biglink" title="Организации Москвы" rel="nofollow" href="http://maps.2gis.ru/#/?history=project/moscow/center/37.483053506226,55.651472694665/zoom/16/">Перейти к большой карте</a>
<noscript id="dg-widget-minigis-place-0bf4886f" style="color:#c00;font-size:16px;font-weight:bold;">
Код для вставки виджета на сайт
</noscript>
<script src="http://mini.api.2gis.ru/js/ver_537e69a/loader.js"></script>
<script type="text/javascript">
new DG.Widget.Components.Loader({
wid: '0bf4886f',
params: {"projectSelector":{"id":32,"code":"moscow","name":"Москва","centroid":"POINT(37.62017 55.753466)"},"search":{"rubrics":{"list":["_3","_10","_12","_18","_43","_48"],"linksHEXColor":"62a5e4","linksRGBColor":{"r":98,"g":165,"b":228},"iconsColor":"696969"},"_searchFirmBasePoint":{"lon":37.4830535062256,"lat":55.6514726946646},"searchBasePointName":"Москва, Ленинский проспект, 158"},"customBalloon":{"content":"Москва, Ленинский проспект, 158"},"Map":{"zoom":16,"lon":37.4830535062256,"lat":55.6514726946646,"customBalloon":true,"customBallonHidden":false},"resize":{"w":700,"h":500}} });
</script> |
Теперь нужно вставить его в Ваш сайт.
Покажу как это можно сделать для WordPress и Joomla.
Сначала для WordPress.
Если просто вставить код в пост или страницу, мы ничего не увидим.
Я предлагаю сделать отдельный шаблон для нашей страницы.
Для этого находим папку с вашим шаблонов в каталоге /wp-content/themes/ блога.
В этой папке создаем, через FTP-клиент новый файл mypage.php.
В него добавляем следующий код:
<?php /* Template Name: My Page */ ?> |
И сохраняем.
Теперь нам нужно скопировать в него содержимое из файлов page.php или single.php Вашего шаблона и удалить код, который отвечает за вывод комментариев и по необходимости сайдбара.
В середину страницы, размещая перед ним код ?>, мы добавляем код для карты и справочника 2GIS, а после него
<?php
/*
Template Name: My Page
*/
get_header();
?>
<a id="2gis_mini_biglink" title="Организации Москвы" rel="nofollow" href="http://maps.2gis.ru/#/?history=project/moscow/center/37.483053506226,55.651472694665/zoom/16/">Перейти к большой карте</a>
<noscript id="dg-widget-minigis-place-0bf4886f" style="color:#c00;font-size:16px;font-weight:bold;">
Код для вставки виджета на сайт
</noscript>
<script src="http://mini.api.2gis.ru/js/ver_537e69a/loader.js"></script>
<script type="text/javascript">
new DG.Widget.Components.Loader({
wid: '0bf4886f',
params: {"projectSelector":{"id":32,"code":"moscow","name":"Москва","centroid":"POINT(37.62017 55.753466)"},"search":{"rubrics":{"list":["_3","_10","_12","_18","_43","_48"],"linksHEXColor":"62a5e4","linksRGBColor":{"r":98,"g":165,"b":228},"iconsColor":"696969"},"_searchFirmBasePoint":{"lon":37.4830535062256,"lat":55.6514726946646},"searchBasePointName":"Москва, Ленинский проспект, 158"},"customBalloon":{"content":"Москва, Ленинский проспект, 158"},"Map":{"zoom":16,"lon":37.4830535062256,"lat":55.6514726946646,"customBalloon":true,"customBallonHidden":false},"resize":{"w":800,"h":500}} });
</script>
<?php
get_footer();
?> |
