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

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

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

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

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

Подключение карт Google:

Обратите внимание: в мае 2018 года компания Google приняла решение о монетизации сервиса карт Google Maps — для всех сайтов и разработчиков теперь необходимо получение собственного API-ключа для доступа к конструктору карт для сайтов. Если вы предпочитаете картографические сервисы Google, пожалуйста, перейдите к следующему руководству.

Подключение карт Яндекс:

Аналогичное решение в 2019 году принято компанией Яндекс, поэтому для использования Яндекс.Карт нужно получить API-ключ и указать его в настройках виджета. Имеются ограничения на бесплатное использование запросов к картам - не более 25 000 в сутки.
О том, как получить API-ключ и добавить карту Яндекса, вы можете прочитать в этом руководстве.

 

Подключение карт Яндекс или Google

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

1__1_.png

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

2019-10-29_22-37-47.png

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

2019-10-29_22-44-38.png

4. Вставьте API-ключ от Яндекс или Google (в зависимости от того, какую карту вы добавляете):

2019-10-29_22-53-34.png

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

2019-10-29_22-56-14.png

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

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

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

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

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

2019-10-29_23-01-22.png

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

2019-10-29_23-03-12.png

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

2019-10-29_23-05-36.png

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

2019-10-29_23-07-20.png

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

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

2019-10-29_23-10-39.png

9. Всё готово. Разместите карту в нужном месте на лендинге, а затем сохраните лендинг для применения изменений:

11.png

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

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

По любым возникшим вопросам обязательно обращайтесь к нашим специалистам службы технической поддержки. По будням, с 10 до 18 часов по Москве, мы доступны по номеру телефона 8(800)505-72-45, а с 11 до 19 часов по будням с нами можно связаться по Skype (логин: lpgenerator).

Также мы будем рады ответить на любые ваши вопросы, адресованные на e-mail-адрес support@lpgenerator.ru, круглосуточно и без выходных.

Высоких Вам конверсий!

С уважением,

команда LPgenerator.

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 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 - так мы сможем точно увидеть картину и дать действенные рекомендации.