На страницах блога я уже рассказывал об использовании 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>

Теперь нужно вставить его в Ваш сайт.

 

Для этого нам нужен Page Builder.

Включаем. Добавляем виджет Текст и вставляем туда код

 

Все! Вот так выглядит результат:

По материалам http://webmap-blog.ru/obzors/dobavlyaem-2gis-na-svoj-sajt