Google карта для каждого ресурса как TV поле при помощи Google Maps TV на MODX

Данный урок подойдет владельцам сайтов на modx revolution, которые хотят встроить гугл карту для каждого ресурса как дополнительное TV поле. Отлично подойдет для туристических сайтов и сайтов каталогов. Урок подготовлен штатным программистом студии

# Инструкции 12 Сентября 2020 Комментариев: 18

Вконце урока в панели управления, в выбранных ресурсах появится вкладка с выбором местоположения на карте. Вы сможете поставить точку на интерактивной google карте непосредственно в самой панели управления, в дополнительном поле. Возможно выбрать только одну точку! Для каждого ресурса сайта, вы сможете выбрать новое местоположение на карте.

Нам понадобится компонент Google Maps TV.

Скачать Google Maps TV с сайта modx

Далее устанавливаем дополнение на ваш modx сайт

Карта google для каждого ресурса как TV поле MODX

Следующим пунктом необходимо создать дополнительное TV поле (в нашем случае назовем поле - karta). Во вкладке "Параметры ввода" тип ввода выставляем значение "Тип ввода" - КАРТА. Далее не забываем поставить галочку на нужном шаблоне, сохраняемся и идем дальше. Карта google для каждого ресурса как TV поле MODX

Следующим пунктом нам необходимо получить API KEY для наших гугл карт. Открываем сайт гугла и нажимаем кнопку получить ключ. Не забудьте войти в аккаунт google иначе ключ не получите.

Карта google для каждого ресурса как TV поле MODX

После того как ключ получен, идем в системные настройки и выбираем пункт mapstv. В поле "значение" вставляем полученный API ключ с сайта гугл.

Карта google для каждого ресурса как TV поле MODX

Теперь расскажем немного о самом компоненте Google Maps TV

Компонент реализует удобный поиск местоположения в режиме онлайн. Все манипуляции можно сократить, вбив необходимый город или страну в соответствуещее поле, после чего нажимаем кнопку "Получить кординаты" и мы перемещаемся в нужную точку.

Карта google для каждого ресурса как TV поле MODX Если в ресурсе карта не грузится или выдает сообщение об ошибке, значит что то не так с API ключем. Попробуйте получить его заного или отредактировать уже полученный (возможно нужно дать доступ ключу к вашему домену)

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

{"street":"","housenumber":"","zipcode":"","city":"","state":"","country":"","latitude":"","longitude":""}

Вернемся к настройке и установке компонента на наш modx сайт. Создадим чанк, где мы зададим шаблон вывода данных, которые будет отдавать нам плагин Google Maps TV. Назовем его tplmap. Этот чанк некая маска вывода т.к конкретно в нашем скрипте используются сокращения, а плагин, по умолчанию выводит полные названия.

{lat: [[+latitude]], lng: [[+longitude]]}

В этот чанк вы сможете добавить необходимые поля, которые нужны для конкретно вашего случая. Нам же нужно просто вытащить кординаты (широта и долгота) заданные в админке нашего ресурса. Более подробно о том, какие поля за что отвечают, вы сможете узнать из официальной документации google.

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

Местоположение

В скрипте, который подключается в конце, вместо слова API_KEY так же необходимо вставить полученный API ключ гугл!

Думаю вы уже поняли как работает данный компонент =) Стоит взглянуть на то, что идет в скрипте после параметра "center". Поле [[*karta:JSONtoChunk=`tplmap`]] как раз таки и отвечает за передачу всех наших параметров в карту гугл, что и позволяет нам получить на выходе нашу карту на конкретной странице сайта.

Карта google для каждого ресурса как TV поле MODX

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


Комментарии ( )

    Карта google для каждого ресурса как TV поле MODX

    Дмитрий

    12 сентября 2020, 00:23

    Доброго времени суток!
    Есть такой вопрос, а если маркеры надо вывести не один?

      Карта google для каждого ресурса как TV поле MODX

      Сергей

      12 сентября 2020, 00:26

      Добрый день! Этот вариант подходит только для одного маркера. Возможно я не доглядел и покопавшись в документации компонента можно вывести несколько маркеров.

        Карта google для каждого ресурса как TV поле MODX

        Дмитрий

        12 сентября 2020, 00:27

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

        Карта google для каждого ресурса как TV поле MODX

        Евгений

        12 сентября 2020, 00:27

        Опишите более подробно что нужно

          Карта google для каждого ресурса как TV поле MODX

          Дмитрий

          12 сентября 2020, 00:27

          Есть сайт, в родителе есть чилды, на детях есть геометки, через pdoresources собираю их и пытаюсь вывести на карте, но карта не выводиться, не хочет собирать Высоту и ширину
          marker = new google.maps.Marker({
          position:{lat:, lng: },
          map: map,
          animation: google.maps.Animation.BOUNCE,
          title: 'СП «Веставто» ОАО'
          }),

          [[!pdoResources?
          &element=`msProducts`
          &tpl=`@INLINE marker = new google.maps.Marker({
          position:[[+google:JSONtoChunk=`tplmap`]],
          map: map,
          animation: google.maps.Animation.BOUNCE,
          title: '[[+pagetitle]]'
          }),`
          &limit=`0`
          &includeTV=`google`
          ]]

            Карта google для каждого ресурса как TV поле MODX

            Евгений

            12 сентября 2020, 00:28

            Может не высоту и ширину а кординаты широта и долгота? В админке карта появилась? Там точку поставил? Вполне может быть что не задал высоту и ширину карты в css. Если нет ошибок на странице где выводишь карту, нужно инспектировать блок и смотреть css

              Карта google для каждого ресурса как TV поле MODX

              Дмитрий

              12 сентября 2020, 00:28

              В Админке, на отдельном ресурсе все выводится
              div id=«map535» style=«width:100%;height:400px;» в тулах

              Карта google для каждого ресурса как TV поле MODX

              Марк

              30 октября 2020, 01:06

              интересует аналогичный вопрос, только когда нужно вывести 10 документов на странице (10 карт), но показывает почему-то только одну и ошибка в консоли

              You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.

                Карта google для каждого ресурса как TV поле MODX

                Сергей

                30 октября 2020, 01:10

                Это инструкция для вывола карты для каждого ресурса. 1 карта = 1 ресурс.

                  Карта google для каждого ресурса как TV поле MODX

                  Марк

                  30 октября 2020, 01:42

                  :) это понятно, но как побороть когда нужно вывести списком?

                    Карта google для каждого ресурса как TV поле MODX

                    Марк

                    30 октября 2020, 07:52

                    Сергей, закончите статью) Написано для сайтов каталогов, но статья не закончена и в примере ещё можно вывести метку с подсказкой

                      Карта google для каждого ресурса как TV поле MODX

                      Марк

                      30 октября 2020, 07:52

                      var map[[+id]];
                      var coordinates = [[+tv.maps:JSONtoChunk=`tplmap`]];
                      function initMap() {
                      map = new google.maps.Map(document.getElementById('map[[+id]]'), {
                      center: [[+tv.maps:JSONtoChunk=`tplmap`]],
                      zoom: 15,
                      center: coordinates,
                      scrollwheel: true,
                      });
                      var marker = new google.maps.Marker({
                      position: coordinates,
                      map: map,
                      });
                      }

                  Карта google для каждого ресурса как TV поле MODX

                  Алексей

                  12 сентября 2020, 00:28

                  Забыли написать что нужно чтобы был активен так же Maps JavaScript API. иначе в админке не будет видна карта.

                    Карта google для каждого ресурса как TV поле MODX

                    Сергей

                    12 сентября 2020, 00:29

                    Цитирую
                    «После того как ключ получен, идем в системные настройки и выбираем пункт mapstv. В поле „значение“ вставляем полученный API ключ с сайта гугл.»

                      Карта google для каждого ресурса как TV поле MODX

                      Алексей

                      12 сентября 2020, 00:29

                      Ваша ссылка и ваш скрин говорят о том что вы получаете ключ к Google Maps Geocoding API
                      joxi.ru/D2PYbP1TpQ111A
                      Я лично сейчас все сделал и у меня в консоли была ошибка, что Maps JavaScript API не подключен и его следует включить. Могу даже видео записать если вы не верите.

                        Карта google для каждого ресурса как TV поле MODX

                        Вадим

                        12 сентября 2020, 00:30

                        Здравствуйте!
                        Подскажите, пожалуйста, как показать карту с ресурка «Контакты» на Главной странице.
                        Ваш пример работает так:
                        На ресурсе «Контакты» стоит «ТВ — Карта» с плейсхолдерами [[+latitude]] и [[+longitude]]
                        И соответственно карта отображается только на странице «Контакты».
                        А как сделать такой вариант:
                        Настраиваем карту на ресурсе «Контакты» и выводим эту карту на всех страницах в подвале. А значения [[+latitude]] и [[+longitude]] получаем с ресурка «Контакты».

                          Карта google для каждого ресурса как TV поле MODX

                          Сергей

                          12 сентября 2020, 00:30

                          Здравствуйте!
                          Этот вариант карты вам не подойдет. Функционал заключается в том, чтобы вывести для каждого ресурса карту! Если нужна одна карта в футере, просто задайте вместо [[+latitude]] и [[+longitude]] кординаты вручную, длина и широта. Вбиваете адрес в яндекс карты и слева, где адрес точки будет длина и широта допустим 59.637389 и -39.84849

                            Карта google для каждого ресурса как TV поле MODX

                            Марк

                            29 октября 2020, 09:13

                            Отличная статья, но добавьте в неё — как вывести маркер «как в админке»