Désactiver le zoom de la molette de la souris sur Google Maps intégré
Je travaille sur un site WordPress où les auteurs intègrent généralement Google Maps à l'aide d'iFrames dans la plupart des publications.
Existe-t-il un moyen de désactiver le zoom via la molette de la souris sur tous ceux-ci en utilisant Javascript?
J'avais le même problème: lors du défilement de la page, le pointeur se déplace sur la carte et commence à effectuer un zoom avant/arrière sur la carte au lieu de continuer à faire défiler la page. :(
J'ai donc résolu ce problème en mettant un div avec un .overlay exactement avant chaque insertion de gmap iframe, voir:
<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>
Dans mon CSS j'ai créé la classe:
.overlay {
background:transparent;
position:relative;
width:640px;
height:480px; /* your iframe height */
top:480px; /* your iframe height */
margin-top:-480px; /* your iframe height */
}
La div couvrira la carte, empêchant les événements de pointeur d'y accéder. Mais si vous cliquez sur le div, il devient transparent pour les événements de pointeur, réactivant la carte!
J'espère vous avoir aidé :)
J'ai essayé la première réponse dans cette discussion et cela n'a pas fonctionné pour moi, peu importe ce que j'ai fait, alors j'ai proposé ma propre solution:
Enveloppez l'iframe avec une classe (.maps dans cet exemple) et, idéalement, intégrez-le code: http://embedresponsively.com/ - Modifiez le code CSS de l'iframe en pointer-events: none, puis en utilisant jQuery Cliquez sur la fonction pour accéder à l'élément parent, vous pouvez modifier le fichier iframes css en 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");
});
Je suis sûr qu'il n'y a qu'un seul moyen de faire cela, si quelqu'un veut ajouter quelque chose à cela.
La méthode JavaScript pour réactiver les événements de pointeur est assez simple. Donnez simplement un identifiant à l'iFrame ("iframe"), puis appliquez un événement onclick à la 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>
J'ai étendu la solution @nathanielperales.
Ci-dessous la description du comportement:
- cliquez sur la carte pour activer le défilement
- lorsque la souris quitte la carte, désactive le défilement
Ci-dessous le code 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);
Je ré-édite le code écrit par #nathanielperales, ça a vraiment fonctionné pour moi. Simple et facile à attraper mais ça ne marche qu'une fois. J'ai donc ajouté mouseleave () sur JavaScript. Idée adaptée de #Bogdan Et maintenant, c'est parfait. Essaye ça. Les crédits vont à #nathanielperales et #Bogdan. Je viens de combiner les deux idées. Merci les gars. J'espère que cela aidera les autres aussi ...
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");
});
Improviser - Adapter - Surmonter
Et voici un exemple jsFiddle.
Oui c'est assez facile. J'ai fait face à un problème similaire. Ajoutez simplement la propriété css "pointeur-événements" au div de iframe et réglez-la sur 'none'.
Exemple: <iframe style = "événements de pointeur: aucun" src = ........>
SideNote: Ce correctif désactivera tous les autres événements de souris sur la carte. Cela a fonctionné pour moi car nous n’avions demandé aucune interaction de la part de l’utilisateur sur la carte.
var mapOptions = {
scrollwheel: false,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Après avoir fait des recherches, vous avez 2 options. Depuis de nouvelles cartes api avec iframe incorporer ne semble pas supporter la désactivation de molette.
D'abord utiliserait les anciennes cartes de Google ( https://support.google.com/maps/answer/3045828?hl=fr ).
Second créerait une fonction javascript pour simplifier l'intégration d'une carte pour chaque commentaire et utiliser des paramètres (son exemple de code uniquement pour pointer l'emplacement ne montre pas la solution exacte)
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 */
}
Il existe une solution géniale et facile.
Vous devez ajouter une classe personnalisée dans votre css qui définit les événements de pointeur pour mapper le canevas sur aucun:
.scrolloff{
pointer-events: none;
}
Ensuite, avec jQuery, vous pouvez ajouter et supprimer cette classe en fonction de différents événements, par exemple:
$( 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
});
});
J'ai créé un exemple dans jsfiddle , espérons que cela aide!
Je viens d'enregistrer un compte sur developers.google.com et de récupérer un jeton pour appeler une API Google Maps, et de simplement le désactiver comme ceci (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
});
}
Ceci est mon approche. Je trouve facile à mettre en œuvre sur divers sites Web et à l'utiliser tout le temps
CSS et 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>
Dans le HTML, vous voudrez envelopper l'iframe dans un 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>J'espère que cela aidera tous ceux qui recherchent une solution simple.
Voici une solution simple. Il suffit de définir le pointer-events: none CSS sur le <iframe> pour désactiver le défilement de la souris.
<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>
Si vous souhaitez que le défilement de la souris soit activé lorsque l'utilisateur clique sur la carte, utilisez le code JS suivant. Cela désactivera également le défilement de la souris lorsque la souris se déplacera hors de la carte.
$(function() {
$('#gmap-holder').click(function(e) {
$(this).find('iframe').css('pointer-events', 'all');
}).mouseleave(function(e) {
$(this).find('iframe').css('pointer-events', 'none');
});
})
Pour désactiver le zoom de la molette de la souris sur Google Maps incorporé, il vous suffit de définir le pointeur-événements de propriété css de l'iframe sur aucun:
<style>
#googlemap iframe {
pointer-events:none;
}
</style>
C'est tout ... plutôt chouette hein?
<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>
Pour moi, la meilleure solution consistait simplement à utiliser comme ceci:
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>
Considérations:
Le mieux serait d’ajouter une superposition avec une transparence plus sombre avec un texte: "Cliquez pour parcourir" lorsque la molette de la souris est désactivée Mais quand il est activé (après avoir cliqué dessus), la transparence avec le texte serait disparaît et l'utilisateur peut parcourir la carte comme prévu. Des indices comment faire ça?
Voici ma solution simple.
Mettez votre iframe dans une div avec une classe appelée "maps" par exemple.
Ce sera le CSS pour votre iframe
.maps iframe { pointer-events: none }
Et voici un petit javascript qui définit la propriété pointer-events de l'iframe sur "auto" lorsque vous survolez l'élément div pendant au moins 1 seconde (me convient le mieux - définissez ce que vous voulez) et efface le délai d'attente/réglez-le sur "néant" à nouveau lorsque la souris quitte l'élément.
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");
});
À votre santé.
J’ai créé un plugin jQuery très simple pour résoudre le problème. Vérifiez-le sur 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>Ajouter du style pointer-events:none; cela fonctionne bien
<iframe style="pointer-events:none;" src=""></iframe>
Le moyen le plus simple consiste à utiliser un pseudo-élément tel que :before ou :after.
Cette méthode ne nécessitera aucun élément HTML supplémentaire ni jquery.
Si nous avons par exemple cette structure 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>
Ensuite, tout ce que nous avons à faire est de rendre le wrapper relatif au pseudo-élément que nous allons créer pour empêcher le défilement.
.map_wraper{
position:relative;
}
Après cela, nous allons créer le pseudo-élément qui sera positionné sur la carte pour empêcher le défilement:
.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;
}
Et vous avez terminé, pas de jquery, pas d'éléments html supplémentaires! Voici un exemple de travail jsfiddle: http://jsfiddle.net/e6j4Lbe1/
Variations sur un thème: une solution simple avec jQuery, aucune édition CSS requise.
// 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
});
L'écouteur en survol est attaché à l'élément parent. Par conséquent, si le parent actuel est plus grand, vous pouvez simplement envelopper l'iframe d'un div avant la 3ème ligne.
J'espère que ça va être utile pour quelqu'un.
À l'aide de la réponse de @nathanielperales, j'ai ajouté la fonction de survol, car cela fonctionne mieux lorsque l'utilisateur perd le focus sur la carte pour arrêter de défiler à nouveau :)
$(function(){
$('.mapa').hover(function(){
stopScroll();},
function () {
$('.mapa iframe').css("pointer-events", "none");
});
});
function stopScroll(){
$('.mapa').click(function () {
$('.mapa iframe').css("pointer-events", "auto");
});
}
Dans Google Maps v3, vous pouvez maintenant désactiver le défilement pour zoomer, ce qui améliore considérablement l'expérience utilisateur. Les autres fonctions de la carte fonctionneront toujours et vous n’avez pas besoin de div supplémentaires. J'ai également pensé qu'il devrait y avoir un retour pour l'utilisateur afin qu'il puisse voir quand le défilement est activé. J'ai donc ajouté une bordure de carte.
// 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')
});
};
Ajoutez ceci à votre 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
});
}
Je suis tombé sur cette question moi-même et ai utilisé un mélange de deux réponses très utiles à cette question: la réponse de czerasz et la réponse de massa .
Ils ont tous les deux beaucoup de vérité, mais quelque part dans mes tests, j'ai découvert que l'un d'entre eux ne fonctionnait pas pour mobile et était mal pris en charge IE (ne fonctionne que sur IE11). C'est la solution de nathanielperales, puis étendue par czerasz, qui repose sur les événements pointeur-événements css et qui ne fonctionne pas sur mobile (il n'y a pas de pointeur dans mobile) et cela ne fonctionne pas tout version de IE qui n'est pas la v11. Normalement, cela m'est égal, mais il y a une tonne d'utilisateurs et nous voulons des fonctionnalités cohérentes. J'ai donc opté pour la solution de superposition, utilisant un wrapper pour faciliter le codage.
Donc, mon balisage ressemble à ceci:
<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>
Alors les styles sont comme ça:
.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*/
}
Enfin le 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);
J'ai aussi ajouté ma solution testée dans un GitHub Gist , si vous voulez obtenir des trucs à partir de là ...
Cela vous donnera une carte Google réactive qui arrêtera le défilement sur l'iframe, mais une fois cliqué dessus, vous pourrez zoomer.
Copiez-le et collez-le dans votre code HTML, mais remplacez le lien iframe par le vôtre. Il s'agit d'un article avec un exemple: Désactive le zoom de la molette de la souris sur les iframes Google Map intégrés
<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>
Ceci est une solution avec CSS et Javascript (ie. Jquery mais fonctionne aussi avec du Javascript pur). Dans le même temps, la carte est sensible. Évitez de zoomer sur la carte lors du défilement, mais la carte peut être activée en cliquant dessus.
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 */
}
S'amuser !
Voici mon approche à ce sujet.
Pop ceci dans mon fichier main.js ou similaire:
// 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');
Ensuite, insérez simplement un div vide à l'endroit où vous souhaitez que la carte apparaisse sur votre page.
<div id="map"></div>
Vous devrez évidemment également faire appel à l'API Google Maps. J'ai simplement créé un fichier appelé mapi.js et l'ai jeté dans mon dossier/js. Ce fichier doit être appelé avant le javascript ci-dessus.
`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");
})();`
Lorsque vous appelez le fichier mapi.js, assurez-vous de lui attribuer l'attribut faux du capteur.
c'est-à-dire: <script type="text/javascript" src="js/mapi.js?sensor=false"></script>
La nouvelle version 3 de l'API nécessite l'inclusion d'un capteur pour une raison quelconque. Assurez-vous d'inclure le fichier mapi.js avant votre fichier main.js.
Le plus simple:
<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>
si vous avez un iframe utilisant l'API Google Map intégrée, procédez comme suit:
<iframe width="320" height="400" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>
vous pouvez ajouter ce style 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>
Voici ma solution au problème, je construisais un site WP, il y a donc un petit code php ici. Mais la clé est scrollwheel: false, dans l'objet de la carte.
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
});
}
J'espère que cela aidera. À votre santé
Pour google maps v2 - GMap2:
ar map = new GMap2(document.getElementById("google_map"));
map.disableScrollWheelZoom();
Voici ma réponse à la réponse de @nathanielperales étendue par @chams, maintenant à nouveau étendue par moi.
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'));
});