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

Простенький модуль для вставки карт на сайт.

30.06.2013
26 комментариев
4 мин.

Было дело, я писал статью про создание продвинутой контактной страницы. Там была вставка карты, которая не только показывает место, но и может проложить к нему маршрут. В момент написания, у меня появилась идея написать модуль для простой вставки карт на сайт, ну и я его создал. Представляю вам модуль 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>
Пример №1
Пример 2
<google address="г. Пермь, ул. Пермская 200" addressplacemark="false" height="400" maptypecontrol="false" streetviewcontrol="false" width="760" zoom="10" zoomcontrol="false"></google>
Пример №2
Пример 3
<google address="г. Пермь, ул. Крисанова 16; г. Пермь, ул Крисанова 18; г. Пермь, Ленина 82; г. Пермь, ул Крисанова 18Б" height="400" width="760" zoom="16"></google>
Пример №3
Пример 4
<google address="г. Пермь, Ленина 82" ballooncontent="Часы работы: <b>9:00 — 21:00</b>" height="400" width="760" zoom="16"></google>
Пример №4
Пример 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>
Пример №5

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

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

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

Прикрепленные файлы
1.jpg — 1.jpg, 96.67 КБ
2.jpg — 2.jpg, 83.44 КБ
3.jpg — 3.jpg, 87.95 КБ
4.jpg — 4.jpg, 87.34 КБ
5.jpg — 5.jpg, 88.5 КБ
Drupal
Drupal 7
Mappy

Комментарии

Сергей   чт, 25/07/2013 - 17:41

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

Niklan   пт, 26/07/2013 - 11:34

В шаблоне пишите на <mappy:google> или <mappy:yandex> а просто <google> и соответственно <yandex>

Николай   вс, 28/07/2013 - 12:24

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

Niklan   вс, 28/07/2013 - 17:35

Добрый день. В самом яндексе правильно прокладывает?

Николай   пн, 29/07/2013 - 09:24

Да. В яндексе нормально пролаживает. Карта для города Минск.

lex   чт, 27/02/2014 - 16:42

Доброго дня,

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

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

Niklan   чт, 27/02/2014 - 16:46

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

Гость   чт, 27/02/2014 - 17:24

Карта гугл, пропустил скобки не заметил, исправил, теперь отображается так   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>

 

Niklan   чт, 27/02/2014 - 17:29

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

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

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

lex   чт, 27/02/2014 - 17:34

Спасибо за оперативность) Хм, про стили сайта не подумал, буду искать, еще раз спасибо!

Алексей   вт, 15/07/2014 - 16:37

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

Niklan   вт, 15/07/2014 - 16:57

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

Wiseua   ср, 12/07/2017 - 12:53

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

Plazik   ср, 17/09/2014 - 18:26

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

Василий   пт, 14/11/2014 - 13:07

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

Павел   вс, 17/05/2015 - 19:46

Аналогичная ситуация, версия модуля 1.5

На 1.3 версии модуля все нормально.

Макс   чт, 11/06/2015 - 12:43

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

Александр   ср, 18/05/2016 - 10:04

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

Александр   ср, 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:16

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

Антон   вт, 17/01/2017 - 11:18

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

Wiseua   ср, 12/07/2017 - 12:51

Это редактор обрезает теги настройте фильтры в wysiwyg.

Vladimir   пт, 10/11/2017 - 22:00

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

Niklan   ср, 15/11/2017 - 12:03

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