Как добавить карты Google в Weebly?

Карты используются для отображения адреса вашей компании на вашем веб-сайте в реальном виде вместо простого текстового адреса. Пользователи могут увеличивать и просматривать адрес в реальном времени, а также переходить к картам Google, чтобы найти маршруты или оставить отзыв. Weebly позволяет добавлять карты на свой сайт двумя способами:

  • Использование элемента карты по умолчанию
  • Использование элемента Embed Code

Мы подробно обсудим оба варианта в следующих разделах.

Связанный: Как использовать Google Maps на сайте WordPress.

Добавьте Карты Google в Weebly с помощью элемента карты

Элемент карты в редакторе сайта Weebly помогает добавить карты Google на ваш сайт и настроить адрес, размер, производителя и т. Д. Вы можете просто перетащить элемент «Карта», и карта Google будет автоматически добавлена ​​на страницу.

Элемент карты Weebly

Щелкните карту, чтобы увидеть следующие параметры настройки:

Адрес – войдите в город, чтобы навести маркер на эту точку на карте.

Увеличить – установите предел масштабирования, перетащив ползунок на нужный уровень.

Ширина высота – установите ширину и высоту вашей карты, чтобы она соответствовала разметке страницы. Оставьте для ширины значение «Авто», чтобы адаптивная карта автоматически выравнивалась по ширине браузера.

Должность – установить левое, правое или центральное выравнивание карты.

Интервал – установите верхнее и нижнее поля, чтобы оставить пространство между другими элементами и картой на странице.

Расширенное местоположение – Если адрес неточный, вы можете ввести точные координаты широты и долготы, чтобы поставить маркер в нужном месте.

Расширенный дисплей – вы можете показать или скрыть маркер по адресу, масштаб на карте, обзорную карту и управление картой.

Вы можете выбрать один из следующих вариантов для функции панорамирования под управлением карты:

  • Большой контроль панорамирования и масштабирования
  • Небольшое управление масштабированием и панорамированием
  • Только небольшой зум
  • Никто

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

Встраивание или привязка карты Google

Элемент карты Weebly предлагает ограниченные возможности и не позволяет встраивать поиск направления или карту улиц. Если вы ищете карту с дополнительными опциями, следуйте приведенным ниже инструкциям:

  • Идти к Сайт Google Maps.
  • Найдите и найдите адрес.
  • Если вы хотите добавить маршруты между вашим адресом и любым конкретным местом.
  • Щелкните значок меню навигации, расположенный в верхнем левом углу.
  • Выберите «Поделиться или встроить карту», ​​как показано ниже:
Встраивание Google Maps

Встраивание Google Maps

  • Выберите размер карты на вкладке «Вставить карту».
  • Скопируйте код iframe.
Вставить карту Google с маршрутами

Вставить карту Google с маршрутами

  • Перейдите на свой сайт Weebly и вставьте код карт Google в элемент «Вставить код».

Добавление карты Google значительно снизит скорость загрузки страницы, поскольку вызовет API Google для загрузки карты. Поэтому вместо добавления карты в реальном времени вы можете просто привязать свой адрес к карте Google. В описанном выше процессе вместо перехода на вкладку «Вставить карту» щелкните вкладку «Поделиться ссылкой». Скопируйте ссылку, и вы сможете создать гиперссылку на Weebly с любым якорным текстом или изображением.

Передача местоположения на Google Maps

Передача местоположения на Google Maps

При нажатии на ссылку откроется сайт Google Maps, включая поиск маршрутов.

Встраивание карт Google со сторонних веб-сайтов

Есть также много сторонних предложений Google Maps API с лучшим обзором на сайте. Например, вы можете перейти к встроить карты Google site и укажите такие параметры, как адрес, тип карты, размер и масштаб, чтобы быстро сгенерировать код встраивания. Вставьте код для вставки в элемент «Код для вставки» на своем сайте Weebly и покажите пользователям свое местоположение на карте.

Встраивание сторонних карт Google

Встраивание сторонних карт Google

Посмотреть живую демонстрацию на сайте Weebly

Похожие записи

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *