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

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.


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

Поделиться:


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

    Selection Studio

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