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

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

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

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

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

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

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

Значок виджета

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

Тип карты

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

Адрес объекта

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

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

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

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

Что там

Узнать координаты точки в Яндекс можно аналогичным способом: кликните правой кнопкой мыши по нужной точке и выберите “Что здесь?”. Либо можете воспользоваться инструментом “Получить информацию”, для этого: кликните по значку с изображением курсора и знака вопроса, после чего кликните по нужному месту на карте. Координаты точки добавятся в поисковую строку, откуда Вы сможете их скопировать:

Что здесь

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

Координаты

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

Карта на всю ширину страницы

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

Обратите внимание, если Вы выберете отображение карты в формате «Гибрид», то в редакторе и просмотре по умолчанию останется формат «Схема».

При просмотре и посещении вашей целевой страницы посетитель сможет самостоятельно выбрать нужный тип отображения.

Приближение карты

Тип отображения карты

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