Отключить масштабирование колеса прокрутки мыши на встроенных Google Картах

198

Я работаю над сайтом WordPress, где авторы обычно встраивают Карты Google, используя iFrames в большинстве постов.

Есть ли способ отключить масштабирование с помощью колеса прокрутки мыши на всех из них с помощью Javascript?

google-maps scrollwheel holiveira
источник
32
Установите опцию карты scrollwheelв false.
Анто Юркович
или отключите его напрямую через JS: map.disableScrollWheelZoom ();
Th3Alchemist
4
Боюсь, ты не сможешь. Из-за ограничений безопасности нет доступа к карте с помощью сценариев, и AFAIK недоступен URL-параметр, который дает вам возможность отключить его.
Dr.Molle
Есть точно такая же проблема. Хотите отключить события прокрутки мыши на встроенной карте iframe. Еще не нашел.
Гжегож
7
Это встроенные карты, не знаю, почему люди
публикуют

Ответы:

255

У меня возникла та же проблема: при прокрутке страницы указатель оказывается над картой, он начинает увеличивать / уменьшать карту вместо продолжения прокрутки страницы. :(

Поэтому я решил это полагая а divс .overlayточно перед каждым GMAP iframeвставки, см:

<html>
  <div class="overlay" onClick="style.pointerEvents='none'"></div>
  <iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>

В моем CSS я создал класс:

.overlay {
   background:transparent; 
   position:relative; 
   width:640px;
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */
}

DIV будет покрывать карту, предотвращая попадание событий указателя на нее. Но если вы нажмете на div, он станет прозрачным для событий указателя, снова активируя карту!

Я надеюсь, что помог вам :)

Масса
источник
9
Это отличное решение. В моем случае я должен был указать для z-indexтого, чтобы он правильно накладывался.
RCNeil
1
ИМО пока лучшее решение этой проблемы! Мы сталкивались с этой проблемой в течение долгого времени, и это делает исправление многоразовым!
Диего Паладино
11
это следует пометить как ответ, хотя, вероятно, проще установить оверлей как абсолютно позиционированный к родительскому контейнеру, а затем просто ширина 100% высота 100%, также не требуется свойство background.
зарядка
3
Я создал очень простой плагин jQuery для автоматизации этого. Проверьте это на github.com/diazemiliano/mapScrollOff
Эмилиано Диас
8
Есть ли простой способ расширить это решение, чтобы события прокрутки колеса игнорировались, а левые щелчки не игнорировались? Это решение хорошо, но требует, чтобы пользователи дважды щелкали по гиперссылке «Направления» в верхней части карты (один раз, чтобы проникнуть в div, а затем снова, чтобы щелкнуть по самой гиперссылке.)
jptsetme
136

Я попробовал первый ответ в этом обсуждении, и он не работал для меня, независимо от того, что я сделал, поэтому я нашел свое собственное решение:

Оберните iframe классом (в этом примере - .maps) и в идеале вставьте соответствующий код: http://embedresponsively.com/ - Измените CSS iframe на, pointer-events: noneа затем с помощью функции click jQuery на родительский элемент, который вы можете изменить css iframes. вpointer-events:auto

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'></iframe>
</div>

CSS

.maps iframe{
    pointer-events: none;
}

JQuery

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none"); 
});

Я уверен, что есть единственный способ сделать это на JavaScript, если кто-то хочет добавить к этому, не стесняйтесь.

Способ JavaScript для повторной активации событий указателя довольно прост. Просто присвойте iFrame идентификатор (т. Е. «Iframe»), затем примените событие onclick к div-элементу cointainer

onclick="document.getElementById('iframe').style.pointerEvents= 'auto'"

<div class="maps" onclick="document.getElementById('iframe').style.pointerEvents= 'auto'">
   <iframe id="iframe" src="" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
nathanielperales
источник
4
Спасибо за решение "без API". +1
жестокие пытки
21
Вы также можете добавить это, чтобы вернуть его в исходное состояние, когда мышь уходит: $ ('. Maps'). Mouseleave (function () {$ ('. Maps iframe'). Css ("pointer-events", " никто"); });
Луис
5
Просто примечание: использование pointer-events: noneпредотвратит любое взаимодействие с картой (перетаскивание, навигация, щелчки и т. Д.).
LuBre
@ LuBre да, это понятно, поэтому есть функция щелчка jQuery, чтобы изменить ее на auto.
nathanielperales
1
Отличный ответ! Вы хотите убедиться, что вы включаете правильную карту, а не все на странице$(this).find('iframe').css("pointer-events", "auto");
Том Пратс
54

Я расширил решение @nathanielperales.

Ниже описание поведения:

  • нажмите на карту, чтобы включить прокрутку
  • когда мышь покидает карту, отключите прокрутку

Ниже код JavaScript:

// Disable scroll zooming and bind back the click event
var onMapMouseleaveHandler = function (event) {
  var that = $(this);

  that.on('click', onMapClickHandler);
  that.off('mouseleave', onMapMouseleaveHandler);
  that.find('iframe').css("pointer-events", "none");
}

var onMapClickHandler = function (event) {
  var that = $(this);

  // Disable the click handler until the user leaves the map area
  that.off('click', onMapClickHandler);

  // Enable scrolling zoom
  that.find('iframe').css("pointer-events", "auto");

  // Handle the mouse leave event
  that.on('mouseleave', onMapMouseleaveHandler);
}

// Enable map zooming with mouse scroll when the user clicks the map
$('.maps.embed-container').on('click', onMapClickHandler);

А вот пример jsFiddle .

czerasz
источник
1
Спасибо за это отрубил. Я использовал это со следующим дополнением в конце:$('.maps.embed-container').find('iframe').css("pointer-events", "none");
lhermann
Спасибо за код. Это фактически решило другую проблему, которая у меня была. Я встроил некоторые диаграммы из Google Spreadsheet, и прокрутка с колесом мыши перестала работать для всей страницы по какой-то причине. Ваш код заставил это снова прокрутиться колесом мыши. Еще раз спасибо.
Скотт М. Штольц
31

Я заново редактирую код, написанный #nathanielperales, он действительно работал для меня. Просто и легко поймать, но его работа только один раз. Поэтому я добавил mouseleave () в JavaScript. Идея адаптирована из # Богдан И теперь его идеально. Попробуй это. Кредиты идут в #nathanielperales и #Bogdan. Я просто объединил обе идеи. Спасибо вам, ребята. Я надеюсь, что это также поможет другим ...

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'>  </iframe>
</div>

CSS

.maps iframe{
    pointer-events: none;
}

JQuery

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none"); 
});

Импровизация - Адаптация - Преодоление

А вот пример jsFiddle.

CHAMS
источник
1
Самое чистое решение. Ницца! Но у ВСЕХ решений есть проблема: пользователи должны дважды щелкнуть карту. Как можно сразу пройти через клик, чтобы он занимал всего один клик?
Лорен
1
Может быть, вы могли бы избежать щелчка, переключившись на pointer-events: autoтолько после того, как мышь «зависла» над картой в течение некоторого времени? т.е. запускает таймер, когда мышь входит в iframe, и сбрасывает его, когда мышь уходит. Если таймер достигает X миллисекунд, переключитесь на pointer-events: auto. И когда мышь покидает фрейм, вы просто переключаетесь обратно pointer-events: none.
Stucampbell
Я предпочитаю использовать dblclick вместо click, во всяком случае, хорошее решение.
Моксет Хан
25

Да, это довольно просто. Я столкнулся с подобной проблемой. Просто добавьте свойство css «pointer-events» в iframe div и установите для него значение «none» .

Пример: <iframe style = "pointer-events: none" src = ........>

SideNote: это исправление отключит все другие события мыши на карте. Это сработало для меня, так как нам не требовалось никакого взаимодействия с пользователем на карте.

Хасам раджа
источник
20
Почему бы тогда просто не использовать изображение? Вы загружаете много дополнительных ресурсов, чтобы отключить все это.
deweydb
2
Да, но я не могу нажать на виджеты
Джеффри Николсон Карре
1
обратите внимание, что это не сработает в IE <11 - caniuse.com/#search=pointer-events
totallyNotLizards
@deweydb - разве это не незаконно?
Мэтт Сондерс
@MattSaunders не уверен, что так было в то время, но сейчас. Вы можете загрузить статическое изображение карты прямо из Google API, возможно, это то, что предлагал deweydb? Конечно, было бы возможным решить проблему.
Азария
19 
var mapOptions = {
   scrollwheel: false,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};
borchvm
источник
13

После некоторых исследований у вас есть 2 варианта. Поскольку новые карты api с iframe embed, похоже, не поддерживают отключение колесика мыши.

Сначала нужно использовать старые карты Google ( https://support.google.com/maps/answer/3045828?hl=ru ).

Вторым было бы создание функции javascript для упрощения встраивания карты для каждого комментария и использования параметров (это пример кода только для указания местоположения, не показывающего точное решение)

function createMap(containerid, parameters) {
  var mymap = document.getElementById(containerid),
  map_options = {
    zoom: 13,
    scrollwheel: false,
    /* rest of options */
  },
  map = new google.maps.Map(mymap, map_options);

  /* 'rest of code' to take parameters into account */
}
Grzegorz
источник
8

Есть отличное и простое решение.

Вам нужно добавить пользовательский класс в ваш CSS, который устанавливает события указателя для отображения холста на none:

.scrolloff{
   pointer-events: none;
}

Затем с помощью jQuery вы можете добавлять и удалять этот класс на основе различных событий, например: 

    $( document ).ready(function() {

    // you want to enable the pointer events only on click;

        $('#map_canvas').addClass('scrolloff'); // set the pointer events to none on doc ready
        $('#canvas').on('click', function() {
            $('#map_canvas').removeClass('scrolloff'); // set the pointer events true on click
        });

    // you want to disable pointer events when the mouse leave the canvas area;

     $( "#map_canvas" ).mouseleave(function() {
          $('#map_canvas').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
     });    
});

Я создал пример в jsfiddle , надеюсь, это поможет!

Богдан
источник
1
Это также работает с Google Maps Embed API - просто замените map_canvas на встроенный iframe. Обратите внимание, что событие click находится на внешнем элементе, но scrolloff находится на внутреннем элементе (это правильно в answer / jsfiddle, на тот случай, если вы транскрибируете, а не копируете /
вставляете
8

Я просто регистрирую один аккаунт на developers.google.com и получаю токен для вызова API Карт и просто отключаю это следующим образом (scrollwheel: false):

    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('container_google_maps'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 8,
            scrollwheel: false
        });
    }
RSiqueira
источник
Намного лучше, чем взломать jQuery!
Даниэль Кис-Надь
7

Это мой подход. Я считаю, что это легко реализовать на разных сайтах и ​​постоянно ими пользоваться

CSS и JavaScript:

<style type="text/css">
.scrolloff iframe   {
    pointer-events: none ;
}
</style>

<script type="text/javascript">
function scrollOn() {
    $('#map').removeClass('scrolloff'); // set the pointer events true on click

}

function scrollOff() {
    $('#map').addClass('scrolloff'); 

}
</script>

В HTML вы захотите заключить iframe в div. <div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" >

function scrollOn() {
    $('#map').removeClass('scrolloff'); // set the pointer events true on click
   
}

function scrollOff() {
    $('#map').addClass('scrolloff'); // set the pointer events true on click
    
}
.scrolloff iframe   {
        pointer-events: none ;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" ><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d23845.03946309692!2d-70.0451736316453!3d41.66373705082399!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89fb159980380d21%3A0x78c040f807017e30!2sChatham+Tides!5e0!3m2!1sen!2sus!4v1452964723177" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>
Развернуть фрагмент

Надеюсь, это поможет любому, кто ищет простое решение.

user1588572
источник
5

Вот простое решение. Просто установите pointer-events: noneCSS на, <iframe>чтобы отключить прокрутку мыши.

<div id="gmap-holder">
    <iframe width="100%" height="400" frameborder="0" style="border:0; pointer-events:none"
            src="https://www.google.com/maps/embed/v1/place?q=XXX&key=YYY"></iframe>
</div>

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

$(function() {
    $('#gmap-holder').click(function(e) {
        $(this).find('iframe').css('pointer-events', 'all');
    }).mouseleave(function(e) {
        $(this).find('iframe').css('pointer-events', 'none');
    });
})
manish_s
источник
!!! Также обратите внимание, что указатели-события Imho отключили все клики по событиям для этого Iframe.
Стефанфридрих
События нажатия отключены только для iframe. Но если вы используете код JS, как только мышь входит в div.gmap-holder, события щелчка снова активируются.
manish_s
Это сработало для меня! Большинство решений были несовместимы с WordPress: onclick очищается, а иногда ширина iframe не учитывается, но это работает как шарм. После удаления кода JS все, что нужно сделать, это сослаться на id = "gmap-holder". Отлично. Спасибо, Маниш.
usonianhorizon
4

Чтобы отключить масштабирование колеса прокрутки мыши во встроенных Картах Google, вам просто нужно установить для свойства css указателя-события iframe значение none:

<style>
#googlemap iframe {
    pointer-events:none;
}
</style>

Вот и все .. Довольно аккуратно, да?

<div id="googlemap">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3648.6714814904954!2d90.40069809681577!3d23.865796688563787!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c425897f1f09%3A0x2bdfa71343f07395!2sArcadia+Green+Point%2C+Rd+No.+16%2C+Dhaka+1230%2C+Bangladesh!5e0!3m2!1sen!2sin!4v1442184916780" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
Надиршах Рахат
источник
2
Это также отключит двойной щелчок зума :)
w3debugger
Также отключает увеличение, уменьшение, направление и т. Д.
zanderwar
4

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

HTML:

<div id="google-maps">
<iframe frameborder="0" height="450" src="***embed-map***"  width="100"</iframe>
</div>

CSS:

#google-maps iframe { pointer-events:none; }

JS:

<script>
  $(function() {
    $('#google-maps').click(function(e) {
        $(this).find('iframe').css('pointer-events', 'auto');
    }).mouseleave(function(e) {
        $(this).find('iframe').css('pointer-events', 'none');
    });
  })
</script>

РЕЗУЛЬТАТ

Соображения:

Лучше всего было бы добавить наложение с более темной прозрачностью с текстом: « Нажмите, чтобы просмотреть », когда колесо мыши деактивировано. Но когда оно активировано (после нажатия на него), тогда прозрачность с текстом исчезнет, и пользователь сможет просматривать карта, как и ожидалось. Любые подсказки, как это сделать?

Qatan
источник
3

Добавить стиль pointer-events:none;это работает отлично

<iframe style="pointer-events:none;" src=""></iframe>
Mohan
источник
3

Самый простой способ сделать это - использовать псевдоэлемент, например :beforeили :after.
Этот метод не потребует дополнительных HTML-элементов или jquery.
Если у нас есть, например, эта структура HTML:

<div class="map_wraper">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d405689.7826944034!2d-122.04109805!3d37.40280355!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb68ad0cfc739%3A0x7eb356b66bd4b50e!2sSilicon+Valley%2C+CA!5e0!3m2!1sen!2sro!4v1438864791455" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>

Тогда все, что нам нужно сделать, это сделать оболочку относительно псевдоэлемента, который мы создадим, чтобы предотвратить прокрутку 

.map_wraper{
    position:relative;
}

После этого мы создадим псевдоэлемент, который будет расположен над картой для предотвращения прокрутки:

.map_wraper:after{
    background: none;
    content: " ";
    display: inline-block;
    font-size: 0;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}

И все готово, без jquery, без дополнительных элементов HTML! Вот рабочий пример jsfiddle: http://jsfiddle.net/e6j4Lbe1/

Андрей
источник
Умная идея Однако, как и некоторые другие ответы, здесь фиксируется все, а не только события колесика мыши.
likeitlikeit
Я рад, что это помогло тебе!
Андрей
3

Вот мое простое решение.

Например, поместите свой iframe в div с классом «maps».

Это будет CSS для вашего iframe

.maps iframe { pointer-events: none }

А вот небольшой javascript, который установит для свойства указателя-события iframe значение «auto», когда вы наведите элемент div минимум на 1 секунду (лучше всего работает для меня - установите все, что вам нравится) и очистите тайм-аут / установите значение «none» еще раз, когда мышь покидает элемент.

var maptimer;

$(".maps").hover(function(){
    maptimer = setTimeout(function(){
        $(".maps").find("iframe").css("pointer-events", "auto");
    },1000);
},function(){
    clearTimeout(maptimer);
    $(".maps").find("iframe").css("pointer-events", "none");
});

Приветствия.

iXzellent
источник
3

Я создал очень простой плагин jQuery для решения проблемы. Проверьте это в https://diazemiliano.github.io/googlemaps-scrollprevent

(function() {
  $(function() {
    $("#btn-start").click(function() {
      $("iframe[src*='google.com/maps']").scrollprevent({
        printLog: true
      }).start();
      return $("#btn-stop").click(function() {
        return $("iframe[src*='google.com/maps']").scrollprevent().stop();
      });
    });
    return $("#btn-start").trigger("click");
  });
}).call(this);
Edit in JSFiddle Result JavaScript HTML CSS .embed-container {
  position: relative !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden !important;
  max-width: 100% !important;
}
.embed-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.mapscroll-wrap {
  position: static !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/diazemiliano/googlemaps-scrollprevent/v.0.6.5/dist/googlemaps-scrollprevent.min.js"></script>
<div class="embed-container">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.746318586604!2d-71.64614110000001!3d-40.76341959999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9610bf42e48faa93%3A0x205ebc786470b636!2sVilla+la+Angostura%2C+Neuqu%C3%A9n!5e0!3m2!1ses-419!2sar!4v1425058155802"
  width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>
<p><a id="btn-start" href="#">"Start Scroll Prevent"</a>  <a id="btn-stop" href="#">"Stop Scroll Prevent"</a>
</p>
Развернуть фрагмент

Эмилиано Диас
источник
2

Используя ответ @nathanielperales, я добавил функцию наведения, потому что для меня это работает лучше, когда пользователь теряет фокус на карте, чтобы снова перестать прокручивать :) 

$(function(){
    $('.mapa').hover(function(){
        stopScroll();},
                     function () {
    $('.mapa iframe').css("pointer-events", "none");
    });
});

function stopScroll(){
$('.mapa').click(function () {
    $('.mapa iframe').css("pointer-events", "auto");
});
}
Maciek Kwapinski
источник
Дело в том, что мы теряем функцию навигации, для меня это очень важно в мобильных устройствах. Я создал очень простой плагин jQuery, который вы можете изменить, если хотите. Проверьте это на github.com/diazemiliano/mapScrollOff
Эмилиано Диас
2

Вариации на тему: простое решение с jQuery, редактирование CSS не требуется.

// make iframe active on click, disable on mouseleave
$('iframe.google_map').each( function(i, iframe) {
    $(iframe).parent().hover( // make inactive on hover
        function() { $(iframe).css('pointer-events', 'none');
    }).click( // activate on click
        function() { $(iframe).css('pointer-events', 'auto');
    }).trigger('mouseover'); // make it inactive by default as well
});

Слушатель при наведении курсора прикреплен к родительскому элементу, поэтому, если текущий родительский элемент больше, вы можете просто обернуть элемент iframe в div перед третьей строкой.

Надеюсь, это кому-нибудь пригодится.

bencergazda
источник
1

Я сам наткнулся на этот вопрос и использовал несколько сочетаний двух очень полезных ответов на этот вопрос: ответ czerasz и ответ massa .

У них обоих много правды, но где-то в моих тестах я обнаружил, что один не работает для мобильных устройств и имеет плохую поддержку IE (работает только в IE11). Это решение от nathanielperales, затем расширенное czerasz, которое опирается на css-события указателя и не работает на мобильных устройствах (в мобильном нет указателя) и не работает ни на одной версии IE, кроме v11. , Обычно мне было бы все равно, но есть масса пользователей, и нам нужна согласованная функциональность, поэтому я решил использовать оверлейное решение, используя оболочку, чтобы упростить кодирование.

Итак, моя разметка выглядит так:

<div class="map embed-container">
  <div id="map-notice" style="display: block;"> {Tell your users what to do!} </div>
  <div class="map-overlay" style="display: block;"></div>
  <iframe style="width:100%" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3785.684302567802!2d-66.15578327375803!3d18.40721382009222!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c036a35d02b013f%3A0x5962cad95b9ec7f8!2sPlaza+Del+Sol!5e0!3m2!1sen!2spr!4v1415284687548" width="633" height="461" frameborder="0"></iframe>
</div>

Тогда стили будут такими:

.map.embed-container {
  position:relative;
}

.map.embed-container #map-notice{
  position:absolute;
  right:0;
  top:0;
  background-color:rgb(100,100,100);/*for old IE browsers with no support for rgba()*/
  background-color: rgba(0,0,0,.50);
  color: #ccc;
  padding: 8px;
}
.map.embed-container .map-overlay{
  height:100%;
  width:100%;
  position:absolute;
  z-index:9999;
  background-color:rgba(0,0,0,0.10);/*should be transparent but this will help you see where the overlay is going in relation with the markup*/
}

Наконец сценарий:

//using jquery...
var onMapMouseleaveHandler = function (event) {
  $('#map-notice').fadeIn(500);
  var elemento = $$(this);
  elemento.on('click', onMapClickHandler);
  elemento.off('mouseleave', onMapMouseleaveHandler);
  $('.map-overlay').fadeIn(500);
}

var onMapClickHandler = function (event) {
  $('#map-notice').fadeOut(500);
  var elemento = $$(this);
  elemento.off('click', onMapClickHandler);
  $('.map-overlay').fadeOut(500);
  elemento.on('mouseleave', onMapMouseleaveHandler);
}
$('.map.embed-container').on('click', onMapClickHandler);

Я также добавил свое протестированное решение в GitHub , если вы хотите получить что-то оттуда ...

EffectiX
источник
1

Это решение с использованием CSS и Javascript (т. Е. Jquery, но работает и с чистым Javascript). В то же время карта отзывчива. Избегайте масштабирования карты при прокрутке, но карту можно активировать, щелкнув по ней.

HTML / JQuery Javascript

<div id="map" onclick="$('#googlemap').css('pointerEvents','auto'); return true;"> 
    <iframe id="googlemap" src="http://your-embed-url" height="350"></iframe>
</div>

CSS

#map {
    position: relative; 
    padding-bottom: 36%; /* 16:9 ratio for responsive */ 
    height: 0; 
    overflow: hidden; 
    background:transparent; /* does the trick */
    z-index:98; /* does the trick */
}
#map iframe { 
    pointer-events:none; /* does the trick */
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100% !important; 
    height: 100% !important; 
    z-index:97; /* does the trick */
}

Радоваться, веселиться !

джинсовый
источник
1

В Google Maps v3 теперь вы можете отключить прокрутку для увеличения, что значительно облегчает работу пользователя. Другие функции карты по-прежнему будут работать, и вам не нужны дополнительные элементы div. Я также подумал, что должен быть какой-то отзыв для пользователя, чтобы он мог видеть, когда прокрутка включена, поэтому я добавил границу карты.

// map is the google maps object, '#map' is the jquery selector
preventAccidentalZoom(map, '#map'); 

// Disables and enables scroll to zoom as appropriate. Also
// gives the user a UI cue as to when scrolling is enabled.
function preventAccidentalZoom(map, mapSelector){
  var mapElement = $(mapSelector);

  // Disable the scroll wheel by default
  map.setOptions({ scrollwheel: false })

  // Enable scroll to zoom when there is a mouse down on the map.
  // This allows for a click and drag to also enable the map
  mapElement.on('mousedown', function () {
    map.setOptions({ scrollwheel: true });
    mapElement.css('border', '1px solid blue')
  });

  // Disable scroll to zoom when the mouse leaves the map.
  mapElement.mouseleave(function () {
    map.setOptions({ scrollwheel: false })
    mapElement.css('border', 'none')
  });
};
Gerry
источник
1

Это даст вам отзывчивую карту Google, которая остановит прокрутку в iframe, но после нажатия позволит вам увеличить масштаб.

Скопируйте и вставьте это в свой HTML, но замените ссылку iframe своей. Он представляет собой статью на этом примере: отключите масштабирование колеса прокрутки мыши во встроенных фреймах Google Map.

<style>
    .overlay {
    background:transparent;
    position:relative;
    width:100%; /* your iframe width */
    height:480px; /* your iframe height */
    top:480px; /* your iframe height */
    margin-top:-480px; /* your iframe height */
    }
</style>
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="100%" height="480"></iframe>
Джонни Джордан
источник
0

Вот мой подход к этому.

Вставьте это в мой main.js или подобный файл:

// Create an array of styles.
var styles = [
                {
                    stylers: [
                        { saturation: -300 }

                    ]
                },{
                    featureType: 'road',
                    elementType: 'geometry',
                    stylers: [
                        { hue: "#16a085" },
                        { visibility: 'simplified' }
                    ]
                },{
                    featureType: 'road',
                    elementType: 'labels',
                    stylers: [
                        { visibility: 'off' }
                    ]
                }
              ],

                // Lagitute and longitude for your location goes here
               lat = -7.79722,
               lng = 110.36880,

              // Create a new StyledMapType object, passing it the array of styles,
              // as well as the name to be displayed on the map type control.
              customMap = new google.maps.StyledMapType(styles,
                  {name: 'Styled Map'}),

            // Create a map object, and include the MapTypeId to add
            // to the map type control.
              mapOptions = {
                  zoom: 12,
                scrollwheel: false,
                  center: new google.maps.LatLng( lat, lng ),
                  mapTypeControlOptions: {
                      mapTypeIds: [google.maps.MapTypeId.ROADMAP],

                  }
              },
              map = new google.maps.Map(document.getElementById('map'), mapOptions),
              myLatlng = new google.maps.LatLng( lat, lng ),

              marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon: "images/marker.png"
              });

              //Associate the styled map with the MapTypeId and set it to display.
              map.mapTypes.set('map_style', customMap);
              map.setMapTypeId('map_style');

Затем просто вставьте пустой div, где вы хотите, чтобы карта появилась на вашей странице.

<div id="map"></div>

Вам, очевидно, нужно будет также позвонить в API Карт Google. Я просто создал файл с именем mapi.js и бросил его в папку / js. Этот файл должен быть вызван до вышеупомянутого JavaScript.

`window.google = window.google || {};
google.maps = google.maps || {};
(function() {

  function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
  }

  var modules = google.maps.modules = {};
  google.maps.__gjsload__ = function(name, text) {
    modules[name] = text;
  };

  google.maps.Load = function(apiLoad) {
    delete google.maps.Load;
    apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m@228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=m@228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m@228000000"],[["http://khm0.googleapis.com/kh?v=135\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=135\u0026hl=en-US\u0026"],null,null,null,1,"135"],[["http://mt0.googleapis.com/vt?lyrs=h@228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=h@228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"h@228000000"],[["http://mt0.googleapis.com/vt?lyrs=t@131,r@228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=t@131,r@228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t@131,r@228000000"],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=80\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=80\u0026hl=en-US\u0026"],null,null,null,null,"80"],[["http://mt0.googleapis.com/mapslt?hl=en-US\u0026","http://mt1.googleapis.com/mapslt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["http://mt0.googleapis.com/vt?hl=en-US\u0026","http://mt1.googleapis.com/vt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/0","3.14.0"],[2635921922],1,null,null,null,null,0,"",null,null,0,"http://khm.googleapis.com/mz?v=135\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon",[["http://mt0.googleapis.com/vt","http://mt1.googleapis.com/vt"],["https://mts0.googleapis.com/vt","https://mts1.googleapis.com/vt"],[null,[[0,"m",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],0],[null,[[0,"m",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],3],[null,[[0,"h",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],0],[null,[[0,"h",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],3],[null,[[4,"t",131],[0,"r",131000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],0],[null,[[4,"t",131],[0,"r",131000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],3],[null,null,[null,"en-US","US",null,18],0],[null,null,[null,"en-US","US",null,18],3],[null,null,[null,"en-US","US",null,18],6],[null,null,[null,"en-US","US",null,18],0]]], loadScriptTime);
  };
  var loadScriptTime = (new Date).getTime();
  getScript("http://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/0/main.js");
})();`

Когда вы вызываете файл mapi.js, убедитесь, что вы передали ему атрибут датчика false.

то есть: <script type="text/javascript" src="js/mapi.js?sensor=false"></script>

Новая версия 3 API требует включения датчика по некоторым причинам. Убедитесь, что вы включили файл mapi.js перед вашим файлом main.js.

Чед Уоррен
источник
0

Для карт Google v2 - GMap2:

ar map = new GMap2(document.getElementById("google_map"));
map.disableScrollWheelZoom();
user956584
источник
0

если у вас есть iframe, использующий встроенный API Google map, например:

 <iframe width="320" height="400" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>

Вы можете добавить этот стиль CSS: указатель-событие: нет; ES.

<iframe width="320" height="400" frameborder="0" style="pointer-event:none;" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>
Фрэнк Дарк
источник
0

Вот мой взгляд на ответ @nathanielperales, расширенный @chams, теперь снова расширенный мной.

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'></iframe>
</div>

JQuery

// we're doing so much with jQuery already, might as well set the initial state
$('.maps iframe').css("pointer-events", "none");

// as a safety, allow pointer events on click
$('.maps').click(function() {
  $(this).find('iframe').css("pointer-events", "auto");
});


$('.maps').mouseleave(function() {
  // set the default again on mouse out - disallow pointer events
  $(this).find('iframe').css("pointer-events", "none");
  // unset the comparison data so it doesn't effect things when you enter again
  $(this).removeData('oldmousepos');
});

$('.maps').bind('mousemove', function(e){
  $this = $(this);
  // check the current mouse X position
  $this.data('mousepos', e.pageX);
  // set the comparison data if it's null or undefined
  if ($this.data('oldmousepos') == null) {
    $this.data('oldmousepos', $this.data('mousepos'));
  }
  setTimeout(function(){
    // some left/right movement - allow pointer events
    if ($this.data('oldmousepos') != $this.data('mousepos')) {
      $this.find('iframe').css("pointer-events", "auto");
    }
    // set the compairison variable
    $this.data('oldmousepos', $this.data('mousepos'));
  }, 300);
  console.log($this.data('oldmousepos')+ ' ' + $this.data('mousepos'));
});
squarecandy
источник
0

Самый простой :

<div id="myIframe" style="width:640px; height:480px;">
   <div style="background:transparent; position:absolute; z-index:1; width:100%; height:100%; cursor:pointer;" onClick="style.pointerEvents='none'"></div>
   <iframe src="https://www.google.com/maps/d/embed?mid=XXXXXXXXXXXXXX" style="width:640px; height:480px;"></iframe>
</div>
T.Todua
источник
0

Добавьте это к вашему сценарию:

function initMap() {
    var uluru = {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: uluru,
        scrollwheel: false,
        disableDefaultUI: true,
        disableDoubleClickZoom: true
    });
    var marker = new google.maps.Marker({
        position: uluru,
        map: map
});
}
Akriti
источник
2
Вопрос касается API Embed (с использованием iframe), а не API JavaScript.
GreatBlakes
0

Вот мое решение проблемы, я создавал сайт WP, поэтому здесь есть небольшой php-код. Но ключ находится scrollwheel: false,в карте объекта.

function initMap() {
        var uluru = {lat: <?php echo $latitude; ?>, lng: <?php echo $Longitude; ?>};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 18,
            scrollwheel: false,
            center: uluru
        });
        var marker = new google.maps.Marker({
            position: uluru,
            map: map
        });
    }

Надеюсь, это поможет. ура

Джордже Арсенович
источник