База знаний
по возможностям платформы

Карты (виджет) — Яндекс и Google maps

Здравствуйте, уважаемые пользователи платформы!

Сегодня мы готовы порадовать вас очередным новым виджетом нашего редактора,
который называется «Карты».

Теперь добавить на вашу посадочную страницу карту Google или Яндекс можно всего за пару кликов!

1. Откройте необходимый лендинг в редакторе LPgenerator:

2. На панели слева кликните по значку виджета карт:

 3. В открывшемся окне выберите тип карты: Яндекс.Карты или Google Maps.

4. Впишите нужный адрес:

Желательно (но необязательно) вводить адрес в определенной последовательности:

  • формат адреса для Google Maps — улица, номер дома, город, область;
  • формат адреса для Яндекс.Карт — страна, город, улица, номер дома.

В случае, если после введения адреса он не применяется к карте, вы можете задать адрес с помощью координат.

Для того, чтобы узнать координаты точки в Google кликните правой кнопкой мыши по нужному месту, нажмите «Что здесь?», после чего скопируйте координаты внизу страницы:

Чтобы узнать координаты точки в Яндекс, достаточно кликнуть по нужному месту, а затем на левой панели скопировать нужные координаты:

После этого вставьте скопированные координаты в виджет карт:

5. Если вы хотите, чтобы карта отображалась по всей ширине экрана, то поставьте галочку в чекбоксе виджета «На всю ширину»:

6. Отредактируйте приближение:

Обратите внимание: на лендинге карта от Яндекс отображается в формате «Схема», а карта от Google в режиме «Карта». При просмотре и посещении вашей посадочной страницы посетитель сможет самостоятельно выбрать нужный тип отображения.

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

8. Готово. Обратите внимание: на страницу может быть добавлено несколько различных карт.

Если карта не отображается, это значит, что, скорее всего, Ваш браузер или его настройки не соответствуют требованиям для яндекс карт и системным требованиям для Google Maps

Высоких вам конверсий и приятной работы!

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 1 из 1
Еще есть вопросы? Отправить запрос

Комментарии

  • Avatar
    Владимир

    как сделать несколько отметок на карте?

  • Avatar
    Максим Гуйван

    Здравствуйте, Владимир!

    Виджет "карты" поддерживает установку только одной метки на карте. Если же необходимо отметить несколько мест на карте, Вы можете воспользоваться конструктором карт от Яндекса:

    http://api.yandex.ru/maps/tools/constructor/

    После настройки карты Вы получите код, который следует вставить в редактор страницы при помощи инструмента HTML.

  • Avatar
    Евгений Нефедьев

    Можно ли сделать не просто много точек на карте, но и прикрепить на них фото как вот здесь: http://www.perimetr-stk.ru/foto-nashikh-rabot/ ???

  • Avatar
    Максим Гуйван

    Здравствуйте!

    Через виджет "карты" можно указать только одну метку без дополнительных настроек и вариантов.

    Если же вы будете работать с конструктором карт GoogleMaps - то возможности будут намного обширнее, хотя для их использования и понадобятся навыки работы с скриптами и HTML кодом на странице.

    Также можно заказать реализацию "многоточечной карты с фотографиями" у специалистов: в отделе вёрстки verstka.lpgenerator.ru или у сторонних специалистов.

  • Avatar
    qwery

    Подскажите как в коде скрипта полученного с яндекс карт приписать параметр "Растягивать на всю ширину"... при этом высота карты остается фиксированной.
    В отрезке кода с Я.Карт эт выглядит так:
    ...UheLrlDHfe_W7IlHU67vo_C5xkkI8Tl0&width=600&height=270

  • Avatar
    Максим Гуйван

    Здравствуйте!

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

    Порядок действий таков:

    1. Непосредственно в коде Яндекс-карты никаких изменений не вносить, просто вставить в HTML-заглушку в редакторе страницы. Запоминаем номер блока.

    2. Далее создайте в разделе СКРИПТЫ новый скрипт, задайте ему любое название и положение "перед тэгом </BODY>"

    3. В текстовой части скрипта вставьте код и замените номер блока с HTML-заглушкой, в которую вставлена карта, на ваш, то есть
      #block-new01 - идентификатор HTML-блока с картой - вы меняете 01 на ваш номер блока с картой.

    <style> 
    #block-new01 ymaps[id]{ width:100% !important; } 
    </style> 
    <script> 
    jq_144(function($){ 
    $('#block-new01').css({ width:$(document).width() }).offset({ left:0 }); 
    }); 
    </script> 
    
    

    4.Сохраняете скрипт, далее сохраняете редактор страницы и можно пользоваться.

    Если возникнут затруднения с реализацией - пишите нам на адрес support@lpgenerator.ru - обязательно указав ссылку на страницу.

  • Avatar
    Олег

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

  • Avatar
    Алена Балакина

    Здравствуйте, Олег!

    Попробуйте так:
    1) переключитесь на Яндекс.Карты
    2) введите адрес
    3) переключитесь на Google карты и введите координаты

    Если не поможет, пожалуйста, напишите нам по адресу support@lpgenerator.ru и в письме укажите страницу с проблемой

  • Avatar
    Иван

    Вставил скрипт как вы посоветовали, HTML заглушку и на просмотре карта прилипла к левой стороне экрана, и по-прежнему маленькая ширина, что делать?
    (у меня уже поставлен скрипт для статичного меню, может в этом проблема?)

  • Avatar
    Максим Гуйван

    Здравствуйте, Иван!
    Лучший вариант решения - это написать на наш адрес support@lpgenerator.ru и указать адрес страницы, на которой вы вставляете HTML - так мы сможем точно увидеть картину и дать действенные рекомендации.

На базе технологии Zendesk