Карта google для каждого ресурса как TV поле MODX
Инструкции Комментариев: 12

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

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

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

Скачать Google Maps TV с сайта modx
Скачать Google Maps TV с нашего сайта

Далее устанавливаем дополнение на ваш 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.


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

Поделиться:


  1. Дмитрий 12 июня 2018, 11:47
    Доброго времени суток!
    Есть такой вопрос, а если маркеры надо вывести не один?
    1. Сергей 12 июня 2018, 11:53
      Добрый день! Этот вариант подходит только для одного маркера. Возможно я не доглядел и покопавшись в документации компонента можно вывести несколько маркеров.
      1. Дмитрий 12 июня 2018, 14:52
        Я просто пытаюсь вытащить все маркеры( т.е. собрать ресурсы), на одну страницу. Не хочет вытягивать Высоту и ширину
      2. Евгений 12 июня 2018, 15:02
        Опишите более подробно что нужно
        1. Дмитрий 12 июня 2018, 15:08(Комментарий был изменён)
          Есть сайт, в родителе есть чилды, на детях есть геометки, через 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`
          ]]
          1. Евгений 12 июня 2018, 15:18
            Может не высоту и ширину а кординаты широта и долгота? В админке карта появилась? Там точку поставил? Вполне может быть что не задал высоту и ширину карты в css. Если нет ошибок на странице где выводишь карту, нужно инспектировать блок и смотреть css
            1. Дмитрий 12 июня 2018, 15:23(Комментарий был изменён)
              В Админке, на отдельном ресурсе все выводится
              div id=«map535» style=«width:100%;height:400px;» в тулах
        2. Алексей 19 июня 2018, 13:25(Комментарий был изменён)
          Забыли написать что нужно чтобы был активен так же Maps JavaScript API. иначе в админке не будет видна карта.
          1. Сергей 19 июня 2018, 13:43
            Цитирую
            «После того как ключ получен, идем в системные настройки и выбираем пункт mapstv. В поле „значение“ вставляем полученный API ключ с сайта гугл.»
            1. Алексей 19 июня 2018, 14:29
              Ваша ссылка и ваш скрин говорят о том что вы получаете ключ к Google Maps Geocoding API
              joxi.ru/D2PYbP1TpQ111A
              Я лично сейчас все сделал и у меня в консоли была ошибка, что Maps JavaScript API не подключен и его следует включить. Могу даже видео записать если вы не верите.
          2. Вадим 15 июля 2018, 10:01
            Здравствуйте!
            Подскажите, пожалуйста, как показать карту с ресурка «Контакты» на Главной странице.
            Ваш пример работает так:
            На ресурсе «Контакты» стоит «ТВ — Карта» с плейсхолдерами [[+latitude]] и [[+longitude]]
            И соответственно карта отображается только на странице «Контакты».
            А как сделать такой вариант:
            Настраиваем карту на ресурсе «Контакты» и выводим эту карту на всех страницах в подвале. А значения [[+latitude]] и [[+longitude]] получаем с ресурка «Контакты».

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

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

            Selection Studio

            Поделитесь страницей в соц. сетях