Как добавить карту с адресом компании на страницу сайта

Добавляем на сайт карты Google, Яндекс, OpenStreetMap

У большинства онлайн-магазинов имеющих оффлайн представительства или пункты выдачи заказов на странице Контакты рекомендуется добавлять карты для более наглядного ориентирования.

Обычно страница Контакты на вашем сайте создана через Сайт->Страницы или Магазин->Витрина->Страницы. Откройте её на редактирование и перейдите на вкладку HTML. В этом режиме необходимо вставить код предлагаемый картографическими сервисами. Основные картографические сервисы: Google.Карты, Яндекс.Карты и OpenStreetMap. Стоит выбрать тот который представляет лучшее отображение вашего региона.

Google.Карты

На странице https://www.google.ru/maps/ найдите местоположение и в левом выпадающем меню по кнопке ☰ выберите "Поделитесь с друзьями или получите код карты". Переключитесь на вкладку Код, отцентрируйте карту и скопируйте код вида:

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d4490.729912544475!2d37.61565403902758!3d55.752162152658855!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sru!2sru!4v1446321871360" width="600" height="450" frameborder="0" style="border:0" rel="border:0" allowfullscreen></iframe>

Яндекс.Карты

Для Яндекс.Карт существует конструктор https://tech.yandex.ru/maps/tools/constructor/ доступный после регистрации или авторизации для уже существующих яндекс-аккаунтов. С его помощью сформируйте карту, добавьте нужные отметки и пути подъезда. Нажмите "Сохранить карту и получить ссылку" и скопируйте код вида

<script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=tr5dHkPra7srQ0N0DjEJ6Bu5JM_F2CV1&width=500&height=400&lang=ru_RU&sourceType=constructor"></script>

OpenStreetMap

Пройдите по адресу http://www.openstreetmap.org/ и выберите местоположение. В правом выпадающем меню выберите иконку Вставить на сайт и отметьте вкладку Код. Здесь вы можете настроить параметры и скопировать код:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=37.60612607002258%2C55.74793660031878%2C37.624043226242065%2C55.75346149255379&layer=mapnik" style="border: 1px solid black" rel="border: 1px solid black"></iframe><br/><small><a href="http://www.openstreetmap.org/#map=17/55.75070/37.61508">Посмотреть более крупную карту</a></small>

После получение нужного кода вставьте его на страницу Контакты и сохраните. В предпросмотре можете сравнить размер и при необходимости изменяя в коде значения width и height настроить ширину и высоту карты.



4 комментария

  • +1
    Valery Valery 26 мая 2017 14:26 #

    Не работает, Webasyst — 1.7.3.139 + Яндекс.Карты. При вставке кода на вкладке HTML

    <script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A13509707ce4719d5bb3a731b13e3cd4873deab6103c6b1c465056b83eb3d770a&width=500&height=400&lang=ru_RU&scroll=true"></script>

    при заходе на страницу - просто чистый лист

  • +1
    Valery Valery 30 мая 2017 10:09 #

    Спасибо за помощь.

    Установил, что проблема была с темой (отложенная загрузка скриптов). В коде скрипта для Яндекс карты заменил

    <script type="text/javascript" charset="utf-8" async src=

    на

    <script data-disable-delayed-loading="1" src=

    и все заработало.

  • +1
    Вячеслав Вячеслав 25 декабря 2018 17:31 #

    Сначала тоже не работала карта от Яндекса. Потом разобрался.

    Делал вывод карты на странице с помощью блоков.

    Создал блок

    назвал yamap

    <script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A1c16321e3bddf280037918c8e10e4a11e817ba0d8f908fed6133d790b88d0221&width=100%&height=400&lang=ru_RU&sourceType=constructor"></script>

    Вставил на страницу Контакты

    {$wa->block("yamap")}

    Все заработало.

    А основная ошибка была в амперсантах. Почистил код карты от amp;

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

    Чтобы добавить комментарий, зарегистрируйтесь или войдите