Désactiver le zoom de la molette de la souris sur Google Maps intégré

198

Je travaille sur un site WordPress où les auteurs intègrent généralement Google Maps à l'aide d'iFrames dans la plupart des articles.

Existe-t-il un moyen de désactiver le zoom via la molette de la souris sur tous en utilisant Javascript?

google-maps scrollwheel holiveira
la source

32

Définissez l'option de carte scrollwheelsur false.

Anto Jurković

ou désactivez-le directement via JS: map.disableScrollWheelZoom ();

Th3Alchemist

4

Je crains que vous ne puissiez pas. En raison de restrictions de sécurité, il n'y a pas d'accès de script à la carte et AFAIK, aucun paramètre d'URL n'est disponible qui vous donne la possibilité de le désactiver.

Dr.Molle

Vous avez exactement le même problème. Vous voulez désactiver les événements de défilement de la souris sur la carte iframe intégrée. Je ne l'ai pas encore trouvé.

Grzegorz

7

Il s'agit de cartes intégrées,

je

255

J'avais le même problème: lorsque vous faites défiler la page, le pointeur passe sur la carte, il commence à zoomer / dézoomer sur la carte au lieu de continuer à faire défiler la page. :(

J'ai donc résolu cela en mettant un divavec un .overlayexactement avant chaque iframeinsertion de gmap , 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 */
}

Le 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 pointer les événements, réactivant la carte!

J'espère vous avoir aidé :)

Massa
la source

9

C'est une excellente solution. Dans mon cas, j'ai dû spécifier un z-indexpour qu'il se superpose correctement, cependant.

RCNeil

1

IMO la meilleure solution à ce problème à ce jour! Nous sommes confrontés à ce problème depuis longtemps et cela en fait une solution réutilisable agréable et assez propre!

Diego Paladino

11

cela devrait être marqué comme réponse, bien qu'il soit probablement plus facile de définir la superposition comme positionnée de manière absolue sur un conteneur parent, puis de simplement largeur 100% hauteur 100%, n'a également pas besoin d'une propriété d'arrière-plan.

hcharge

3

J'ai créé un plugin jQuery très simple pour automatiser cela. Vérifiez-le sur github.com/diazemiliano/mapScrollOff

Emiliano Díaz

8

Existe-t-il un moyen simple d'étendre cette solution afin que les événements de la molette de défilement soient ignorés, mais que les clics gauches ne soient pas ignorés? Cette solution est agréable, mais nécessite que les utilisateurs cliquent deux fois sur le lien hypertexte "Directions" en haut de la carte (une fois pour pénétrer le div, puis à nouveau pour cliquer sur le lien hypertexte lui-même.)

jptsetme

136

J'ai essayé la première réponse dans cette discussion et cela ne fonctionnait pas pour moi, peu importe ce que je faisais, j'ai donc trouvé ma propre solution:

Enveloppez l'iframe avec une classe (.maps dans cet exemple) et le code idéalement intégré: http://embedresponsively.com/ - Modifiez le CSS de l'iframe en pointer-events: nonepuis en utilisant la fonction de clic de jQuery à l'élément parent, vous pouvez modifier les 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"); 
});

Je suis sûr qu'il y a une seule façon de faire JavaScript, si quelqu'un veut ajouter à cela, n'hésitez pas.

La façon JavaScript de réactiver les événements de pointeur est assez simple. Donnez simplement un Id à l'iFrame (ie "iframe"), puis appliquez un événement onclick à la div du 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
la source

4

Merci pour la solution "sans API". +1

Severe Torture

21

Vous pouvez également ajouter ceci pour le ramener à son état d'origine lorsque la souris quitte: $ ('. Maps'). Mouseleave (function () {$ ('. Maps iframe'). Css ("pointeur-événements", " aucun"); });

Luis

5

Juste une note: l'utilisation pointer-events: noneempêchera toute interaction avec la carte (glissement, navigation, clics, etc.).

LuBre

@LuBre oui, c'est entendu, c'est pourquoi il y a la fonction de clic jQuery pour la changer en auto.

nathanielperales

1

Très bonne réponse! Vous voulez vous assurer que vous activez la bonne carte et pas tout sur la page$(this).find('iframe').css("pointer-events", "auto");

Tom Prats

54

J'ai étendu la solution @nathanielperales.

Sous la description du comportement:

cliquez sur la carte pour activer le défilement
lorsque la souris quitte la carte, désactivez le défilement

Sous 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);

Et voici un exemple jsFiddle .

czerasz
la source

1

Merci pour cette coupure. Je l'ai utilisé avec l'ajout suivant à la fin:$('.maps.embed-container').find('iframe').css("pointer-events", "none");

lhermann

Merci pour le code. Cela a en fait résolu un problème différent que j'avais. J'ai intégré des graphiques à partir de la feuille de calcul Google et le défilement avec la molette de la souris a cessé de fonctionner pour toute la page pour une raison quelconque. Votre code l'a fait défiler à nouveau avec la molette de la souris. Merci encore.

Scott M. Stolz

31

Je suis en train de rééditer le code écrit par #nathanielperales, cela a vraiment fonctionné pour moi. Simple et facile à attraper mais son travail une seule 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.

CHaMs
la source

1

Solution la plus propre. Agréable! Mais TOUTES les solutions ont un problème: les utilisateurs doivent cliquer deux fois sur la carte. Comment passer immédiatement le clic, donc cela ne prend qu'un seul clic?

Loren

1

Peut-être pourriez-vous éviter le clic en basculant pointer-events: autouniquement après que la souris a "survolé" la carte pendant une certaine durée? c'est-à-dire démarrer le chronomètre lorsque la souris entre dans iframe et le réinitialiser lorsque la souris quitte. Si la minuterie atteint X millisecondes, passez à pointer-events: auto. Et chaque fois que la souris quitte l'iframe, vous revenez simplement à pointer-events: none.

stucampbell

Je préfère utiliser dblclick au lieu de cliquer, de toute façon une bonne solution.

Moxet Khan

25

Oui, c'est assez facile. J'ai fait face à un problème similaire. Ajoutez simplement la propriété css «pointer-events» à la division iframe et définissez-la sur «none» .

Exemple: <iframe style = "pointer-events: none" src = ........>

SideNote: Cette correction désactiverait tous les autres événements de souris sur la carte. Cela a fonctionné pour moi car nous n'avons pas eu besoin d'interaction de l'utilisateur sur la carte.

Hassam Raja
la source

20

Pourquoi ne pas simplement utiliser une image alors? vous chargez beaucoup de ressources supplémentaires juste pour tout désactiver.

deweydb

2

Oui mais je ne peux pas cliquer sur les widgets

Jeffrey Nicholson Carré

1

veuillez noter que cela ne fonctionnera pas sur IE <11 - caniuse.com/#search=pointer-events

totallyNotLizards

@deweydb - n'est-ce pas illégal?

Matt Saunders du

@MattSaunders ne sait pas si c'était le cas à l'époque, mais c'est maintenant. Vous pouvez charger une image de carte statique directement à partir de l'API Google, c'est peut-être ce que deweydb suggérait? Serait certainement un moyen possible de contourner le problème.

azariah

19

var mapOptions = {
   scrollwheel: false,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

borchvm
la source

13

Après avoir fait quelques recherches, vous avez 2 options. Étant donné que les nouvelles API de cartes avec iframe intégrées ne semblent pas prendre en charge la désactivation de la molette de la souris.

La première serait d'utiliser d'anciennes cartes Google ( https://support.google.com/maps/answer/3045828?hl=en ).

La seconde consisterait à créer une fonction javascript pour simplifier l'incorporation d'une carte pour chaque commentaire et à utiliser des paramètres (c'est un exemple de code uniquement pour pointer l'emplacement et ne pas montrer 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 */
}

Grzegorz
la source

8

Il existe une solution impressionnante 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 , j'espère que ça aide!

Bogdan
la source

1

Cela fonctionne également avec l'API Google Maps Embed - il suffit de remplacer map_canvas par l'iframe intégré. Notez que l'événement click est sur l' élément externe , mais scrolloff est sur l' élément interne (c'est correct dans la réponse / jsfiddle, juste au cas où vous transcririez plutôt que copier / coller)

Jxtps

8

Je viens d'enregistrer un compte sur developers.google.com et d'obtenir un jeton pour appeler une API Maps, et je désactive simplement cela comme ceci (molette de défilement: 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
la source

Tellement mieux que les hacks jQuery!

Dániel Kis-Nagy

7

Telle est mon approche. Je trouve qu'il est 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 encapsuler l'iframe dans une 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>

Développer l'extrait

J'espère que cela aidera toute personne à la recherche d'une solution simple.

user1588572
la source

5

Voici une solution simple. Réglez simplement le pointer-events: noneCSS sur <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 sort 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');
    });
})

manish_s
la source

!!! Notez également que les événements de pointeur Imho ont désactivé tous les événements de clic pour cet Iframe.

stephanfriedrich

Les événements de clic sont désactivés uniquement pour l'iframe. Mais si vous utilisez le code JS, dès que la souris entre dans le support div.gmap, les événements de clic seront réactivés.

manish_s

Cela a fonctionné brillamment pour moi! La plupart des solutions étaient incompatibles avec WordPress: onclick est nettoyé, et parfois la largeur de l'iframe n'est pas respectée, mais cela a fonctionné comme un charme. Après avoir rangé le code JS, il suffit de référencer l'id = "gmap-holder". Parfait. Merci Manish.

usonianhorizon

4

Pour désactiver le zoom de la molette de la souris sur Google Maps intégré, il vous suffit de définir les événements de pointeur de propriété css de l'iframe sur aucun:

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

C'est tout .. Assez bien 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>

NadirShah Rahat
la source

2

Cela désactivera également le zoom double clic :)

w3debugger

Désactive également le zoom avant, le zoom arrière, les directions, etc.

zanderwar

4

Eh bien, pour moi, la meilleure solution était d'utiliser simplement 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>

RÉSULTAT

Considérations:

Le mieux serait d'ajouter une superposition avec une transparence plus sombre avec un texte: " Cliquer pour parcourir " lorsque la molette de la souris est désactivée Mais quand il est activé (après avoir cliqué dessus) alors la transparence avec du texte disparaîtrait et l'utilisateur pourrait parcourir la carte comme prévu. Des indices sur la façon de faire ça?

Qatan
la source

3

Ajoutez du style à pointer-events:none;ce travail

<iframe style="pointer-events:none;" src=""></iframe>

Mohan
la source

3

La façon la plus simple de le faire est d'utiliser un pseudo-élément comme :beforeou :after.
Cette méthode ne nécessitera aucun élément HTML supplémentaire ou 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 devons faire est de faire le wrapper par rapport 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 fonctionnel de jsfiddle: http://jsfiddle.net/e6j4Lbe1/

Andrei
la source

Idée brillante. Cependant, comme certaines des autres réponses, cela capture tout, pas seulement les événements de la roue de la souris.

likeitlikeit

je suis content que cela vous ait aidé!

Andrei

3

Voici ma solution simple.

Mettez votre iframe dans un div avec une classe appelée "maps" par exemple.

Ce sera le CSS de votre iframe

.maps iframe { pointer-events: none }

Et voici un petit javascript qui définira la propriété pointer-events de l'iframe sur "auto" lorsque vous survolez l'élément div pendant au moins 1 seconde (fonctionne mieux pour moi - définissez-le sur ce que vous voulez) et efface le délai d'attente / définissez-le à nouveau sur "none" 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é.

iXzellent
la source

3

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>

Développer l'extrait

Emiliano Díaz
la source

2

En utilisant 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 faire 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");
});
}

Maciek Kwapinski
la source

Le fait est que nous perdons la fonction de navigation, pour moi, c'est très important dans les appareils mobiles. J'ai créé un plugin jQuery très simple que vous pouvez modifier si vous le souhaitez. Vérifiez-le sur github.com/diazemiliano/mapScrollOff

Emiliano Díaz

2

Variations sur un thème: une solution simple avec jQuery, aucune modification CSS nécessaire.

// 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 de survol est attaché à l'élément parent, donc si le parent actuel est plus grand, vous pouvez simplement envelopper l'iframe avec un div avant la 3ème ligne.

J'espère que ce sera utile pour quelqu'un.

bencergazda
la source

1

Je suis tombé sur ce problème moi-même et j'ai utilisé une combinaison de deux réponses très utiles sur cette question: la réponse de czerasz et massa .

Ils ont tous deux beaucoup de vérité, mais quelque part dans mes tests, j'ai découvert que l'un ne fonctionnait pas pour les mobiles et avait un mauvais support IE (ne fonctionne que sur IE11). Ceci est la solution de nathanielperales, puis étendue par czerasz, qui s'appuie sur les événements de pointeur css et qui ne fonctionne pas sur mobile (il n'y a pas de pointeur sur mobile) et cela ne fonctionne pas sur aucune version d'IE qui n'est pas v11 . Normalement, je m'en fous, 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, en 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>

Ensuite, les styles sont comme ceci:

.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 également ajouté ma solution testée dans un gist GitHub , si vous aimez obtenir des trucs à partir de là ...

EffectiX
la source

1

C'est une solution avec CSS et Javascript (ie. Jquery mais fonctionne aussi avec Javascript pur). En même temps, la carte est réactive. Évitez la carte pour zoomer 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 !

Jean
la source

1

Dans Google Maps v3, vous pouvez désormais désactiver le défilement pour zoomer, ce qui améliore considérablement l'expérience utilisateur. D'autres fonctions de carte fonctionneront toujours et vous n'avez pas besoin de divs supplémentaires. J'ai également pensé qu'il devrait y avoir des commentaires pour l'utilisateur afin qu'il puisse voir lorsque 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')
  });
};

Gerry
la source

1

Cela vous donnera une carte Google Maps réactive qui arrêtera le défilement sur l'iframe, mais une fois cliqué sur, vous permettra de zoomer.

Copiez et collez ceci dans votre html mais remplacez le lien iframe par le vôtre. Il est un article à ce sujet avec un exemple: Désactiver 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>

Jonny Jordan
la source

0

Voici mon approche à ce sujet.

Insérez 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 où vous voulez que la carte apparaisse sur votre page.

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

Vous devrez évidemment également appeler 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 transmettre l'attribut false 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 de capteur pour une raison quelconque. Assurez-vous d'inclure le fichier mapi.js avant votre fichier main.js.

Chad Warren
la source

0

Pour google maps v2 - GMap2:

ar map = new GMap2(document.getElementById("google_map"));
map.disableScrollWheelZoom();

user956584
la source

0

si vous avez un iframe utilisant l'API intégrée de Google map comme ceci:

 <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>

Frank Dark
la source

0

Voici mon point de vue sur la réponse @nathanielperales étendue par @chams, maintenant étendue à nouveau 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'));
});

squarecandy
la source

0

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>

T.Todua
la source

0

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
});
}

Akriti
la source

2

La question concerne l'API Embed (à l'aide d'un iframe), pas l'API JavaScript.

GreatBlakes

0

Voici ma solution au problème, je construisais un site WP, donc il y a un petit code php ici. Mais la clé se trouve scrollwheel: false,dans l'objet 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 vous aidera. À votre santé

Djordje Arsenovic
la source

Désactiver le zoom de la molette de la souris sur Google Maps intégré

Réponses: