Google и Яндекс карты на Mobirise сайте


Опубликовано 06.08.2017


Содержание статьи

Приветствуем пользователей программы Mobirise, а также клиентов и посетителей сервиса Mobiriz.Store!

В сегодняшней статье (видеоурок по статье) мы покажем пару полезных фишек при работе с картами в конструкторе сайтов Mobirise.

Нам понадобится:

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

Чтобы устранить это, добавьте следующий код в <head> сайта
<script src="assets/web/assets/jquery/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('#map').addClass('scrolloff');              
        $('#overlay').on("mouseup",function(){          
            $('#map').addClass('scrolloff');             
        });
        $('#overlay').on("mousedown",function(){      
            $('#map').removeClass('scrolloff');
        });
        $("#map").mouseleave(function () {             
            $('#map').addClass('scrolloff');           
                                                       
        });
        
    });
</script>
, затем откройте блок с нужной картой в Редакторе кода и добавьте следующий CSS код:
.scrolloff {
        pointer-events: none;
   }

Далее, если карта подключается при помощи iframe:

  1. Вам необходимо перед подключением iframe добавить код :
    <div id="overlay" class="map">
  2. В iframe указать id : id="map"
  3. Сохранить изменения в Редакторе кода и запустить предпросмотр сайта

Если карта подключается стандартным методом

  1. Перед div’ом карты добавить
    <div id="overlay" class="map">
  2. В div’e указать id: id="map"
  3. Сохранить изменения в Редакторе кода и запустить предпросмотр сайта

Благодаря этому, отображение карты будет всегда корректным.

А что делать, если Вы не хотите использовать Google Maps, а хотите добавить Яндекс.Карты?

Все очень просто. Перейдите на сайт Яндекс карты, создайте нужную Вам карту с нужным регионом и адресом, а также задайте размеры карты (растягивайте по ширине, высота 350-400 пикселей). После этого, скопируйте код готовой карты, перейдите в конструктор сайтов Mobirise и добавьте пустой html блок. Вставьте ранее скопированный код в содержимое блока, найдите значение scroll=true и замените “true” на “false” - это поможет нам избежать прокрутки карты при скроллинге страницы.

Напоследок, обращая внимание на такие вещи Вы можете существенно повысить юзабилити сайта, а от времени нахождения пользователя на сайте могут зависеть ваши продажи или заявки.

Свежие материалы

Статья

AmoCRM Mobirise - простая интеграция Mobirise с CRM

Простой вариант подключения Mobirise к CRM

Статья

Форма отправки без Formoid на PHP

Настраиваем форму отправки без formoid на PHP. Mobirise на русском.

Статья

Детальный обзор расширения WOW Slider

Функциональный слайдер для Mobirise.

Статья

Подключение виджета онлайн-консультанта

Подключение виджета онлайн-консультанта в Mobirise