Mappy - простая вставка карт на сайт

Было дело, я писал статью про создание продвинутой контактной страницы. Там была вставка карты, которая не только показывает место, но и может проложить к нему маршрут. В момент написания, у меня появилась идея написать модуль для простой вставки карт на сайт, ну и я его создал. Представляю вам модуль Mappy.

Mappy — по сути, просто небольшой JS файл, который подгружает все необходимые библиотеки карт на страницах, где собственно и требуется карта. При этом он позволяет вставлять карты на сайты средствами обычного HTML и атрибутов к нему. Что в свою очередь облегчает процесс вставки карт на сайт для неопытных пользователей.

Вставка карты осуществляется при помощи html-тега 

<mappy:сервис></mappy:>

Где вместо сервиса мы подставляем названием карт, google или yandex, а вместо атрибутов, параметры для карты.

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

Каждый из сервисов имеет 4 обязательных параметра:

  • address — город, улица или здание где будет центрироваться карта;
  • zoom — насколько будет изначально приближена или отдалена карта;
  • width — ширина карты в px;
  • height — высотка карты в px.

Со всеми возможными атрибутами, назначением и прочими информативными справками я предлагаю обратиться к документации модуля на GitHub:

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

Пример 1
<google address="г. Пермь, ул. Пермская 200" height="400" width="760" zoom="14"></google>
Пример 2
<google address="г. Пермь, ул. Пермская 200" addressplacemark="false" height="400" maptypecontrol="false" streetviewcontrol="false" width="760" zoom="10" zoomcontrol="false"></google>
Пример 3
<google address="г. Пермь, ул. Крисанова 16; г. Пермь, ул Крисанова 18; г. Пермь, Ленина 82; г. Пермь, ул Крисанова 18Б" height="400" width="760" zoom="16"></google>
Пример 4
<google address="г. Пермь, Ленина 82" ballooncontent="Часы работы: <b>9:00 — 21:00</b>" height="400" width="760" zoom="16"></google>
Пример 5
<yandex address="г. Пермь, ул. Ленина 82" height="400" route="create-route,route-start" width="760" zoom="16"></yandex><input id="route-start" type="text" value="Пермь, "></input><input id="create-route" type="button" value="Показать путь"></input>

Также примеры можно найти на GitHub, и еще немного в комментариях к записи на drupal.ru.

Скачать можно по адресу: http://drupal.org/project/mappy

Приятного использования. Отзывы, предложения и пожелания можете писать как в комментариях к этой записи, так и к записи на drupal.ru.

Оставайся на связи

Будь всегда в курсе новых материалов! Подписывайся на каналы\паблики\рассылки чтобы получать оперативные оповещения.

DrupalCamp Краснодар 2017

DrupalCamp — важная часть жизни Друпал-сообщества, способствующая его сплочению, привлекающая внимание IT-сообщества к Друпалу и общества в целом к разработке приложений и сайтов, а также к смежным сферам.

Разработчики, веб-мастера, дизайнеры, менеджеры проектов, владельцы бизнеса и работодатели — внимание большого количества людей будет привлечено нашим событием.

Интересно будет всем, ждем вас 16 декабря в Краснодаре!

Официальный сайт мероприятия

Комментарии

С
Сергей 25.07.2013 - 17:07

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

Н
Николай 28.07.2013 - 12:07

Добрый день. Спасибо за модуль. Нужная вещь. Делаю с прокладкой маршрута для Яндекс карт, но как то не совсем верно прокладывает маршрут, не до конца. Ссылка на скрин: http://firepic.org/images/2013-07/28/nod0j0gxb6mx.jpg

l
lex 27.02.2014 - 16:02

Доброго дня,

могли бы Вы подсказать по поводу примера 3 и 4?

Вывожу несколько точек (больше 15)+ нужно к каждой балун, пишу так же через ";"  Почему то запись в балуне съезжает и появляется ползунок в самом окошке балуна.

Ответ на от lex (не проверено)

N
Niklan 27.02.2014 - 16:02

У балуна и должен появляться скрол. Какие карты, яндекс или гугл? В яндексе 100% появляется, проверил в их песочнице. Вероятнее у гугла также. Более конкретно, если можно со скринами.

Ответ на от Niklan

Г
Гость 27.02.2014 - 17:02

Карта гугл, пропустил скобки не заметил, исправил, теперь отображается так   http://ge.tt/9zUHKvM1?c

<mappy:google address="г. Калуга, 8 Марта, 2/14; г. Калуга, Московская, 338; г. Калуга, Зерновая, 2 Б" zoom="10" width="610" height="480" balloonContent="ТЗК №251 <b>г. Калуга,8 Марта, 2/1</b>; ТЗК №256 <b>г. Калуга, Московская, 338</b>; ТЗК №252 <b>г. Калуга, Зерновая, 2 Б</b>"><mappy:google>

 

Ответ на от Гость (не проверено)

N
Niklan 27.02.2014 - 17:02

Вставил ваш код у себя и вот результат: http://i.imgur.com/aEt6ZTd.png

Проблема в вашей версте. Ситил сайта спокойно перекрывают стили карт гугла. Я сам постоянно косяки нахожу, в моей верстке постоянно пропадает человечек для просмотра улиц из-за стиля img {max-width: 100}, фикшу .mappy.google img {max-width: auto}

Вам надо найти причину скрола, видимо где-то overflow перекрывает стиль гугла.

А
Алексей 15.07.2014 - 16:07

Не хватает возможности выбора координат вместо адреса. Гугл не всегда знает, где находятся дома в некоторых местах.

Ответ на от Алексей (не проверено)

N
Niklan 15.07.2014 - 16:07

В dev версии какраз эта возможность реализована. Вместо адреса указывается широта и долгота, например: address="58.0000,58.0000;г. Пермь" - также спокойно комбинируются с текстовыми названиями.

Ответ на от Niklan

W
Wiseua 12.07.2017 - 12:07

Смените пожалуйста ссылку с https://www.drupal.org/project/Mappy на https://www.drupal.org/project/mappy неопытные пользователи вбивают в драш Mappy и получают ошибку!

P
Plazik 17.09.2014 - 18:09

Можно ли вручную строить маршрут для яндекс карты 2.1? Т.е. ввести два адреса и вывести на карте маршрут между ними?

В
Василий 14.11.2014 - 13:11

Здравствуйте! Отличный модуль! Спасибо!
А можно ли его использовать во вьюс?
Я создаюсь во вьюхе пользовательское поле и вставляю html код c маппи, а в итоге это поле пустое....

М
Макс 11.06.2015 - 12:06

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

А
Александр 18.05.2016 - 10:05

Спасибо за модуль. Небольшой вопрос. Подскажите почему не появляется метка. Вставляю такой код: "". Или с координатами выставление метки не работает?

А
Александр 18.05.2016 - 10:05

Еще раз код что-то не опубликовался
mappy:yandex address="58.377337,33.881352" balloonContent="ООО Перспектива" zoom="14" width="970" height="400" addressPlacemark="true"

А
Андрей 28.09.2016 - 20:09

После того как мой сайт переехал на https гугл карта перестала загружаться.

А
Антон 17.01.2017 - 11:01

Все отлично, но!....если еще раз зайти и отредактировать ноду, то теги модуля mappy слетают и приходится заново их вставлять в код.

V
Vladimir 10.11.2017 - 22:11

Локально все отлично работает. На хосте выдает ошибку, требуя Google JavaScript API key Собственно этот ключ у меня есть, но куда его засунуть?

Ответ на от Vladimir (не проверено)

N
Niklan 15.11.2017 - 12:11

К сожалению, я на данный момент не развиваю модуль. Хочу его вообще переделать и переосмыслить. Вроде как Google вводили обязательное требование API ключа. Стоит поправить JS для гугла и добавить его куда надо свой. Можете патч с анстройками подготовить :) Приму. Пока не доберусь никак до него.

Добавить комментарий

Содержимое данного поля является приватным и не предназначено для показа.