Добавляем 2GIS на свой сайт

Добавляем 2GIS на свой сайт

На страницах блога я уже рассказывал об использовании API 2GIS для размещения карты и справочника на свой сайт.

Но что делать, когда разместить справочник хочется, но нет возможности или желания подробно изучать API.

Для этого разработчики API 2GIS придумали хорошее решение — виджет 2GIS mini.

При переходе по ссылке, мы попадаем на страницу на которой нужно выбрать тип сайта, где мы хотим использовать виджет.

2GIS mini - выбор категории

Конференции и ярмарки — Места, где можно поесть, поспать и переночевать возле места проведения мероприятий.

Гостиницы — Для сайтов гостиниц и хостелов. Показываются нужные фирмы вокруг.

Новостройки — Для сайтов домов и новостроек — вся инфраструктура рядом.

Города — Все самые важные рубрики вашего города.

Транспорт — Вокзалы, аэропорты, грузоперевозки.

Развлечения — Места города, где можно поесть, отдохнуть и развлечься.

Автолюбителям — Всё важное для любого автомобилиста: СТО, заправки, шиномонтаж.

Культура — Все культурные заведения: от библиотек до театров.

Свой виджет — Возможность самостоятельно сформировать любой набор рубрик.

Например, мы хотим создать карту со справочником ближайших мест для конференции «MasterInfoBiz-2013», которая пройдет в Москве с 18 по 21 октября 2013 года в гостинице «Салют» по адресу Ленинский проспект, д. 158.

Выбираем категорию «Конференции и ярмарки»

На новой странице вводим адрес

2GIS mini - ввод адреса

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

Мы можем отцентрировать и масштабировать карту, изменить размер окна с картой.

Также возможно показывать или не показывать адрес в виджете 2GIS mini.

Нажимаем кнопку «Готово», слева от карты появляется список с категориями.

2GIS mini - категории

Теперь, мы можем уже получить код для вставки на сайт или блог, нажав на кнопку «Получить код».

А можно изменить список со сферами деятельности, поменять цвет иконок и ссылок.

Я изменю цвет иконок и ссылок, аналогично основным стилям моего блога.

Щелкаем по ссылке «Изменить сферы деятельности».

Тогда мы получаем такой вид

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();
?>

Сохраняем файл mypage.php

Заходим в админку и создаем новую страницу.

В редакторе страницы в блоке «Атрибуты страницы», мы можем выбрать наш новый шаблон страницы.

Wordpress - атрибуты страницы

Указываем заголовок страницы, нужную рубрику, теги и пр.

Сохраняем и просматриваем ее.

Мы должны увидеть следующее

Wordpress - 2GIS mini

Для Joomla все намного проще.

Мы отключаем редактор в настройках Joomla.

Создаем новую страницу, вставляем наш код и сохраняем её.

Просматриваем результат

Joomla - 2GIS mini

Вот такой полезный инструмент для добавления справочника и карты 2GIS на Ваш сайт.

Вы также сможете удивить как подготовить виджет из ролика 2GIS

Конструктор виджетов: 2GIS mini на вашем сайте

  • Сергей: А подскажите как можно вставить несколько таких виджетов в материал joomla 2.5, что бы переключаться между ними по вкладкам. Пробовал целую кучу плагинов вкладок материалов, но получается что все эти виджеты отображаются только на первой вкладке.
  • Сергей Угольников: Вероятнее всего нельзя, т.к. в коде виджета вызываются одни и те же скрипты. Когда мы размещаем несколько их на странице, они конфликтуют друг с другом. Поэтому и работает только первый. Можно конечно попытаться выдернуть общие скрипты и добавить их только один раз, но не уверен, что так будет работать.
  • DVAgis: напишите в город карту которого вы хотите разместить и вам дадут нормальное API
  • АЛЕКСАНДР КРЫЛОСОВ: А есть ли возможность сделать так, чтобы при выборе в этом модуле категории или компании, url на странице динамически менялся и при прамом заходе по такому Url сразу показывалась нужная категория. Например я открыл виджет, нашел нужную компанию и ссылкой смог поделиться. При переходе по которой открывался этот же виджет но уже сразу с нужной организацией. ?? а
  • Гость: Спасибо, очень полезная статья!!!
  • Евгений Чернов: все сделал, только при создании новой страницы в wordpress в атрибутах страницы не отображается пункт выбора шаблона. Как быть?
  • Гость: почему не растягивается пальцами на тачпаде, неудобно же читать. все глаза итак толят. давайте переделывайте всё