Добавьте карту Google на сайты Joomla менее чем за 4 минуты

1. Вставить местоположение на карте Google только с Joomla!
2. Шаг 2. Вставьте URL-адрес карты Google в модуль Joomla
3. Вставьте хорошую карту Google с JSN PageBuilder 3
4. Шаг 1: Начнем с пустого модуля
5. Шаг 2. Вставьте карту Google в модуль
6. Шаг 3: Добавить подробную информацию для карты
7. Шаг 4: Показать модуль Google Map на сайте Joomla
8. Заключительные слова

Если у вас есть веб-сайт Joomla для бизнеса или какой-либо профессиональный проект, очень необходимо встроить карту Google на свой сайт . Карта - это хороший «навигатор», позволяющий клиентам напрямую перейти по адресу бренда и повысить доверие к веб-сайту в глазах посетителей.

Следовательно, этот блог поможет вам двумя способами добавить карту Google на ваш сайт за несколько минут. Вот так!

Вставить местоположение на карте Google только с Joomla!

Шаг 1. Получить URL-адрес карты Google

• Пожалуйста, перейдите к https://www.google.com/maps
• Введите адрес в строке поиска. В этом случае я ищу Нью-Йорк, США.
• Нажмите « Поделиться », и на экране появится небольшое всплывающее окно « Поделиться ».

• Затем выберите вкладку « Внедрить карту» (1) во всплывающем окне.

• Чтобы выбрать размер карты, пожалуйста, нажмите кнопку « Средний » (2) и настройте подходящий размер. В этом случае я масштабирую карту до нового измерения: 1200x300 пикселей .
• Наконец, нажмите кнопку « Копировать HTML » (3), чтобы получить встроенный код Google Map.

Шаг 2. Вставьте URL-адрес карты Google в модуль Joomla

Модуль Joomla можно настроить так, чтобы он отображался на нескольких страницах сайта с помощью нескольких простых шагов. Вот так:

• Сначала войдите в свою Joomla! Область администратора, затем перейдите в Расширения в строке меню -> выберите Модули -> нажмите кнопку Новый , чтобы начать с нового модуля.
• Затем вам нужно выбрать тип этого модуля. Здесь это пользовательский тип.
• Затем, в нижней части области содержимого, нажмите кнопку « Переключить редактор» , чтобы изменить режим содержимого на обычный текст, поскольку этот режим редактора может считывать формат HTML встроенного кода карты Google.

• Затем вы должны установить имя модуля в области заголовка .
• В области содержимого нажмите Ctrl / Cmd + V, чтобы вставить встроенный код Google Map в область содержимого.
• На правой боковой панели нажмите « Выбрать позицию», чтобы выбрать позицию для размещения модуля в макете сайта.

• Чтобы выбрать, какие пункты меню отображают модуль карты на веб-сайте Joomla, перейдите на вкладку « Назначение меню » и отметьте нужное поле.
• Нажмите кнопку Сохранить , чтобы завершить модуль. Теперь, пожалуйста, перейдите на свой сайт, чтобы увидеть карту Google на переднем крае. Вот моя карта Google на сайте, созданная с помощью шаблона JSN Vintage 2:

Вставьте хорошую карту Google с JSN PageBuilder 3

С помощью мощного расширения для создания страниц Joomla: JSN PageBuilder 3 , нет никаких ограничений, мешающих вашему творчеству иметь прекрасную веб-страницу Joomla, встроенную в Google Map. Вот так:

Шаг 1: Начнем с пустого модуля

Создайте новый пользовательский модуль Joomla и выберите JSN PageBuilder 3 в качестве режима редактора.

Шаг 2. Вставьте карту Google в модуль

• Во-первых, мы должны определить макет карты Google и связанной с ней информации. В этом случае я выбрал макет because ⅓, потому что я хочу, чтобы карта была больше, чем текстовая область.

• Затем найдите карту Google в элементе Element и перетащите этот элемент в первый столбец.

• Чтобы установить местоположение, пожалуйста, введите адрес в области расположения .

• Чтобы изменить размер карты, границы, анимацию или другие дополнительные параметры, перейдите на вкладки « Стиль» и « Дополнительно» .

Шаг 3: Добавить подробную информацию для карты

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

Во втором столбце я собираюсь создать блок информации под названием « Наше место ». Все элементы в этом столбце - это один заголовок, два абзаца и одна кнопка. Вы можете легко найти их в элементе Element .

• Чтобы установить цвет фона для всего модуля карты Google, выберите весь модуль (на уровне строк) -> выберите вкладку « Стилирование » -> найти фон и выберите любой цвет (или изображение) в качестве фона, как на этом изображении:

• Чтобы выровнять все элементы по середине второго столбца, щелкните столбец и установите выравнивание по центру .

• Чтобы четко отделить каждый элемент, вы должны установить значение для полей. Как и на этом рисунке ниже, я установил поля для второго абзаца:

• Не забудьте проверить работоспособность модуля, нажав кнопку « Устройство» .

Шаг 4: Показать модуль Google Map на сайте Joomla

• Во-первых, нажмите кнопку « Выход из полноэкранного режима» , чтобы вернуться к стандартному интерфейсу Joomla.
• Затем вы должны выбрать позицию модуля и назначить модуль пунктам меню, которые были упомянуты в первом способе выше.
• Наконец, нажмите « Сохранить» и все готово!

Читать подробнее : Установите Google Analytics в Joomla - пошаговое руководство

Заключительные слова

Мы знали о двух простых способах размещения Google Map на веб-сайте Joomla , и я надеюсь, что вам понравится оба! Если у вас есть лучшие идеи по этой теме, не стесняйтесь оставлять свой комментарий здесь, чтобы мы могли учиться друг у друга. Спасибо.

Посмотреть JSN PageBuilder 3

Похожие

Комментарии