Я работаю над сайтом WordPress, где авторы обычно вставляют Карты Google, используя iFrames в большинстве сообщений.
Есть ли способ отключить масштабирование с помощью колесика прокрутки мыши на всех из них с помощью Javascript?
Отключить масштабирование колесика мыши с помощью встроенных карт Google
Ответ 1
У меня была такая же проблема: при прокрутке страницы указатель становится над картой, он начинает увеличивать/уменьшать карту, а не продолжать прокрутку страницы.: (
Итак, я решил, что ставим 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, он станет прозрачным для событий указателя, снова активируя карту!
Надеюсь, вам помогут:)
Ответ 2
Я попробовал первый ответ в этом обсуждении, и он не работал у меня независимо от того, что я сделал, поэтому я придумал свое решение:
Оберните iframe классом (.maps в этом примере) и идеально вставляем код: http://embedresponsively.com/ - Измените CSS iframe до pointer-events: none, а затем используя функцию jQuery click для родительского элемента, вы можете изменить iframes css на 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>
Ответ 3
Я расширил решение @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);
Ответ 4
Я перередактирую код, написанный #nathanielperales, это действительно сработало для меня. Простая и удобная в использовании, но ее работа только один раз. Поэтому я добавил mouseleave() на JavaScript. Идея, адаптированная из #Bogdan И теперь ее совершенная. Попробуй это. Кредиты идут на #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.
Ответ 5
Да, это довольно легко. Я столкнулся с подобной проблемой. Просто добавьте свойство css "указатель-события" в div iframe и установите его в "none" .
Пример: < iframe style = "pointer-events: none" src=........ >
SideNote: это исправление отключит все другие события мыши на карте. Это сработало для меня, так как мы не требовали какого-либо взаимодействия с пользователем на карте.
Ответ 6
var mapOptions = {
scrollwheel: false,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Ответ 7
После нескольких исследований у вас есть 2 варианта. Поскольку новые карты api с встраиванием iframe, похоже, не поддерживают отключение колесика мыши.
Первый будет использовать старые карты google (https://support.google.com/maps/answer/3045828?hl=en).
Второй создаст функцию 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 */
}
Ответ 8
Существует удивительное и простое решение.
Вам нужно добавить пользовательский класс в ваш css, который устанавливает события указателя для отображения canvas в 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, надеюсь, что это поможет!
Ответ 9
Я просто зарегистрирую одну учетную запись на developers.google.com и получаю токен для вызова API Карт и просто отключу это, как это (scrollwheel: ложь):
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
});
}
Ответ 10
Это мой подход. Я нахожу его простым в использовании на разных сайтах и постоянно его использую
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>Ответ 11
Вот простое решение. Просто установите pointer-events: none CSS в <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');
});
})
Ответ 12
Чтобы отключить масштабирование колесика мыши с помощью встроенных карт Google, вам просто нужно установить для указателя-объекта свойства CSS iframe значение none:
<style>
#googlemap iframe {
pointer-events:none;
}
</style>
Thats All.. Довольно аккуратный ха?
<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>
Ответ 13
Ну, для меня лучшим решением было просто так:
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>
Вопросы:
Лучше всего было бы добавить наложение с более темной прозрачностью с текстом: "Нажмите, чтобы просмотреть", когда колесо мыши отключено Но когда он активирован (после нажатия на него), прозрачность с текстом исчезнет, и пользователь сможет просматривать карту, как ожидалось. Любые подсказки, как это сделать?
Ответ 14
Добавьте стиль pointer-events:none; этот рабочий режим
<iframe style="pointer-events:none;" src=""></iframe>
Ответ 15
Я создал очень простой плагин 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>Ответ 16
Самый простой способ сделать это - использовать псевдоэлемент типа :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/
Ответ 17
Вот мое простое решение.
Поместите ваш iframe в div с классом, называемым "maps", например.
Это будет CSS для вашего iframe
.maps iframe { pointer-events: none }
И вот небольшой javascript, который установит свойство pointer-events 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");
});
Приветствия.
Ответ 18
Используя ответ от @nathanielperales, я добавил функцию зависания, потому что для меня это работает лучше, когда пользователь теряет фокус на карте, чтобы снова остановить прокрутку:)
$(function(){
$('.mapa').hover(function(){
stopScroll();},
function () {
$('.mapa iframe').css("pointer-events", "none");
});
});
function stopScroll(){
$('.mapa').click(function () {
$('.mapa iframe').css("pointer-events", "auto");
});
}
Ответ 19
Вариации на тему: простое решение с 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
});
Слушатель Hover привязан к родительскому элементу, поэтому, если текущий родитель больше, вы можете просто просто обернуть iframe div до третьей строки.
Надеюсь, что это будет полезно для кого-то.
Ответ 20
Я сам наткнулся на эту проблему и использовал некоторые из двух полезных ответов на этот вопрос: 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*/
}
Наконец, script:
//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 gist, если вам нравится получать материал оттуда...
Ответ 21
Это решение с 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 */
}
Удачи!
Ответ 22
В 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')
});
};
Ответ 23
Это даст вам отзывчивую карту 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>
Ответ 24
Самый простой:
<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>
Ответ 25
Добавьте это в свой script:
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
});
}
Ответ 26
Вот мой подход к этому.
Поместите это в мой 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 и бросил его в папку my/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/[email protected]\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/[email protected]\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"[email protected]"],[["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/[email protected]\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/[email protected]\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"[email protected]"],[["http://mt0.googleapis.com/[email protected],[email protected]\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/[email protected],[email protected]\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"[email protected],[email protected]"],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.
Ответ 27
Для google maps v2 - GMap2:
ar map = new GMap2(document.getElementById("google_map"));
map.disableScrollWheelZoom();
Ответ 28
если у вас есть iframe, используя встроенный API Google map, как это:
<iframe width="320" height="400" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>
вы можете добавить этот стиль css: pointer-event: none; ES.
<iframe width="320" height="400" frameborder="0" style="pointer-event:none;" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>
Ответ 29
Здесь мой ответ на @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 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'));
});
Ответ 30
Вот мое решение проблемы, я создавал 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
});
}
Надеюсь, это поможет. Приветствия