Deaktivieren Sie den Maus-Scrollrad-Zoom in eingebettetem Google Maps

198

Ich arbeite an einer WordPress-Site, auf der die Autoren Google Maps normalerweise mit iFrames in die meisten Beiträge einbetten.

Gibt es eine Möglichkeit, den Zoom über das Mausrad bei allen mit Javascript zu deaktivieren?

google-maps scrollwheel holiveira
quelle

32

Stellen Sie die Kartenoption scrollwheelauf ein false.

Anto Jurković

oder deaktivieren Sie es direkt über JS: map.disableScrollWheelZoom ();

Th3Alchemist

4

Ich fürchte, du kannst nicht. Aufgrund von Sicherheitsbeschränkungen gibt es keinen Skriptzugriff auf die Karte, und AFAIK ist kein URL-Parameter verfügbar, mit dem Sie sie deaktivieren können.

Dr.Molle

Habe genau das gleiche Problem. Möchten Sie Maus-Scroll-Ereignisse auf eingebetteten Iframe-Karten deaktivieren? Ich habe es noch nicht gefunden.

Grzegorz

7

Dies ist eingebettete Karten, nicht sicher, warum Leute Lösungen für die Verwendung der Karten JS-Bibliothek veröffentlichen

zanderwar

255

Ich hatte das gleiche Problem: Beim Scrollen der Seite wird der Zeiger über die Karte bewegt und beginnt, die Karte zu vergrößern / zu verkleinern, anstatt mit dem Scrollen der Seite fortzufahren. :((

Also habe ich dieses Putten divmit einem .overlaygenau vor jeder gmap- iframeEinfügung gelöst , siehe:

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

In meinem CSS habe ich die Klasse erstellt:

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

Das Div deckt die Karte ab und verhindert, dass Zeigerereignisse darauf zugreifen. Wenn Sie jedoch auf das Div klicken, wird es für Zeigerereignisse transparent und aktiviert die Karte erneut!

Ich hoffe dir wird geholfen :)

Massa
quelle

9

Dies ist eine großartige Lösung. In meinem Fall musste ich jedoch a angeben z-index, damit es korrekt überlagert wird.

RCNeil

1

IMO die bisher beste Lösung für dieses Problem! Wir sind schon lange mit diesem Problem konfrontiert und dies sorgt für eine schöne und ziemlich saubere, wiederverwendbare Lösung!

Diego Paladino

11

Dies sollte als Antwort markiert werden, obwohl es wahrscheinlich einfacher ist, die Überlagerung als absolut positioniert auf einen übergeordneten Container und dann nur Breite 100% Höhe 100% festzulegen, benötigt auch keine Hintergrundeigenschaft.

hcharge

3

Ich habe ein sehr einfaches jQuery-Plugin erstellt, um dies zu automatisieren. Überprüfen Sie es auf github.com/diazemiliano/mapScrollOff

Emiliano Díaz

8

Gibt es eine einfache Möglichkeit, diese Lösung so zu erweitern, dass Scrollrad-Ereignisse ignoriert werden, Linksklicks jedoch nicht ignoriert werden? Diese Lösung ist nett, erfordert jedoch, dass Benutzer zweimal auf den Hyperlink "Wegbeschreibung" oben auf der Karte klicken (einmal, um in das Div einzudringen, und dann erneut, um auf den Hyperlink selbst zu klicken).

jptsetme

136

Ich habe die erste Antwort in dieser Diskussion versucht und es hat bei mir nicht funktioniert, egal was ich getan habe, also habe ich meine eigene Lösung gefunden:

Umschließen Sie den Iframe mit einer Klasse (in diesem Beispiel .maps) und betten Sie im Idealfall den entsprechenden Code ein: http://embedresponsively.com/ - Ändern Sie das CSS des Iframes in und ändern Sie pointer-events: nonedann mithilfe der Klickfunktion von jQuery das übergeordnete Element zupointer-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"); 
});

Ich bin mir sicher, dass es nur eine JavaScript-Möglichkeit gibt, dies zu tun, wenn jemand etwas hinzufügen möchte.

Die JavaScript-Methode zum Reaktivieren der Zeigerereignisse ist ziemlich einfach. Geben Sie dem iFrame einfach eine ID (dh "iframe") und wenden Sie dann ein Onclick-Ereignis auf den cointainer div an:

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
quelle

4

Vielen Dank für die Lösung "ohne API". +1

Schwere Folter

21

Sie können dies auch hinzufügen, um den ursprünglichen Zustand wiederherzustellen, wenn die Maus verlässt: $ ('. Maps'). Mouseleave (function () {$ ('. Maps iframe'). Css ("Zeigerereignisse", " keiner"); });

Luis

5

Nur eine Anmerkung: Die Verwendung pointer-events: noneverhindert jegliche Interaktion mit der Karte (Ziehen, Navigieren, Klicken usw.).

LuBre

@LuBre ja, das versteht sich, deshalb gibt es die jQuery-Klickfunktion, um sie in auto zu ändern.

Nathanielperales

1

Gute Antwort! Sie möchten sicherstellen, dass Sie die richtige Karte aktivieren und nicht alle auf der Seite$(this).find('iframe').css("pointer-events", "auto");

Tom Prats

54

Ich habe die @ Nathanielperales-Lösung erweitert.

Unterhalb der Verhaltensbeschreibung:

Klicken Sie auf die Karte, um den Bildlauf zu aktivieren
Wenn die Maus die Karte verlässt, deaktivieren Sie den Bildlauf

Unter dem Javascript-Code:

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

Und hier ist ein jsFiddle-Beispiel .

czerasz
quelle

1

Vielen Dank für diesen Ausschnitt. Ich habe es am Ende mit folgendem Zusatz benutzt:$('.maps.embed-container').find('iframe').css("pointer-events", "none");

Lhermann

Danke für den Code. Es löste tatsächlich ein anderes Problem, das ich hatte. Ich habe einige Diagramme aus Google Spreadsheet eingebettet und das Scrollen mit dem Mausrad funktioniert aus irgendeinem Grund nicht mehr für die gesamte Seite. Ihr Code hat es wieder mit dem Mausrad scrollen lassen. Danke noch einmal.

Scott M. Stolz

31

Ich bearbeite den von #nathanielperales geschriebenen Code erneut. Es hat wirklich für mich funktioniert. Einfach und leicht zu fangen, aber seine Arbeit nur einmal. Also habe ich mouseleave () in JavaScript hinzugefügt. Idee von #Bogdan angepasst Und jetzt ist es perfekt. Versuche dies. Credits gehen an #nathanielperales und #Bogdan. Ich habe gerade beide Ideen kombiniert. Danke Jungs. Ich hoffe das hilft auch anderen ...

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

Improvisieren - anpassen - überwinden

Und hier ist ein jsFiddle-Beispiel.

cHaMs
quelle

1

Sauberste Lösung. Nett! ALLE Lösungen haben jedoch ein Problem: Benutzer müssen zweimal auf die Karte klicken. Wie kann der Klick sofort durchlaufen werden, sodass nur ein Klick erforderlich ist?

Loren

1

Vielleicht könnten Sie den Klick vermeiden, indem Sie erst zu wechseln, pointer-events: autonachdem die Maus für eine bestimmte Dauer über der Karte "schwebte"? dh Timer starten, wenn die Maus in den Iframe eintritt, und zurücksetzen, wenn die Maus verlässt. Wenn der Timer X Millisekunden erreicht, wechseln Sie zu pointer-events: auto. Und wenn die Maus den Iframe verlässt, wechseln Sie einfach zurückpointer-events: none .

Stucampbell

Ich bevorzuge dblclick anstelle von click, trotzdem eine gute Lösung.

Moxet Khan

25

Ja, es ist ganz einfach. Ich hatte ein ähnliches Problem. Fügen Sie einfach die CSS-Eigenschaft "pointer-events" zum iframe div hinzu und setzen Sie sie auf 'none' .

Beispiel: <iframe style = "Zeigerereignisse: keine" src = ........>

SideNote: Dieser Fix würde alle anderen Mausereignisse auf der Karte deaktivieren. Es hat bei mir funktioniert, da wir keine Benutzerinteraktion auf der Karte benötigten.

Hassam Raja
quelle

20

Warum nicht einfach ein Bild verwenden? Sie laden viele zusätzliche Assets, um alles zu deaktivieren.

Deweydb

2

Ja, aber ich kann nicht auf die Widgets klicken

Jeffrey Nicholson Carré

1

Bitte beachten Sie, dass dies nicht auf IE <11 funktioniert

caniuse.com/#search=pointer-events

@deweydb - ist das nicht illegal?

Matt Saunders

@MattSaunders nicht sicher, ob dies zu der Zeit der Fall war, aber es ist jetzt. Sie können ein statisches Kartenbild direkt von der Google-API laden. Vielleicht hat deweydb dies vorgeschlagen? Wäre sicherlich ein praktikabler Weg, um das Problem zu umgehen.

Azariah

19

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

borchvm
quelle

13

Nach einigen Recherchen haben Sie 2 Möglichkeiten. Da neue Maps-APIs mit Iframe-Einbettung das Deaktivieren des Mausrads nicht zu unterstützen scheinen.

Zuerst würden alte Google Maps verwendet ( https://support.google.com/maps/answer/3045828?hl=de ).

Zweitens würde eine Javascript-Funktion erstellt, um das Einbetten einer Karte für jeden Kommentar und die Verwendung von Parametern zu vereinfachen (der Beispielcode dient nur zur Punktposition und zeigt keine exakte Lösung an).

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
quelle

8

Es gibt eine großartige und einfache Lösung.

Sie müssen eine benutzerdefinierte Klasse in Ihrem CSS hinzufügen, die die Zeigerereignisse so festlegt, dass die Zeichenfläche keiner zugeordnet wird:

.scrolloff{
   pointer-events: none;
}

Mit jQuery können Sie diese Klasse dann basierend auf verschiedenen Ereignissen hinzufügen und entfernen, zum Beispiel:

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

Ich habe ein Beispiel in jsfiddle erstellt , hoffe das hilft!

Bogdan
quelle

1

Dies funktioniert auch mit der Google Maps-Einbettungs-API. Ersetzen Sie einfach map_canvas durch den eingebetteten Iframe. Beachten Sie, dass sich das Klickereignis auf dem äußeren Element befindet, Scrolloff jedoch auf dem inneren Element (es ist in der Antwort / jsfiddle korrekt, nur für den Fall, dass Sie transkribieren und nicht kopieren /

einfügen

8

Ich registriere nur ein Konto auf developer.google.com und erhalte ein Token zum Aufrufen einer Maps-API. Deaktiviere das einfach wie folgt (Scrollrad: 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
quelle

So viel besser als jQuery-Hacks!

Dániel Kis-Nagy

7

Das ist mein Ansatz. Ich finde es einfach, auf verschiedenen Websites zu implementieren und es ständig zu verwenden

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

Im HTML möchten Sie den Iframe in ein Div einschließen. <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>

Erweitern Sie das Snippet

Ich hoffe, dies hilft jedem, der nach einer einfachen Lösung sucht.

user1588572
quelle

5

Hier ist eine einfache Lösung. Stellen Sie das pointer-events: noneCSS einfach auf " <iframe>Maus-Bildlauf deaktivieren".

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

Wenn Sie möchten, dass der Mauslauf aktiviert wird, wenn der Benutzer auf die Karte klickt, verwenden Sie den folgenden JS-Code. Außerdem wird der Mauslauf wieder deaktiviert, wenn sich die Maus aus der Karte herausbewegt.

$(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
quelle

!!! Beachten Sie auch, dass Imho - Zeigerereignisse alle Klickereignisse für diesen Iframe deaktiviert haben .

stephanfriedrich

Die Klickereignisse sind nur für den Iframe deaktiviert. Wenn Sie jedoch den JS-Code verwenden, werden die Klickereignisse wieder aktiviert, sobald die Maus den div.gmap-Halter eingibt.

manish_s

Das hat bei mir hervorragend funktioniert! Die meisten Lösungen waren nicht mit WordPress kompatibel: onclick wird gesäubert, und manchmal wird die Breite des Iframes nicht berücksichtigt, aber das hat wie ein Zauber funktioniert. Nachdem Sie den JS-Code weggelegt haben, müssen Sie nur noch auf die ID = "gmap-owner" verweisen. Perfekt. Danke Manish.

Usonianhorizon

4

Um den Maus-Scrollrad-Zoom in eingebettetem Google Maps zu deaktivieren, müssen Sie nur die Zeigerereignisse der CSS-Eigenschaft des Iframes auf none setzen:

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

Das ist alles .. Ziemlich ordentlich, oder?

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

2

Es wird auch den Doppelklick-Zoom deaktivieren :)

w3debugger

Deaktiviert auch das Vergrößern, Verkleinern

4

Nun, für mich war die beste Lösung, einfach so zu verwenden:

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>

ERGEBNIS

Überlegungen:

Am besten fügen Sie eine Überlagerung mit einer dunkleren Transparenz mit einem Text hinzu: " Klicken zum Durchsuchen ", wenn das Mausrad deaktiviert ist. Wenn es jedoch aktiviert ist (nachdem Sie darauf geklickt haben), verschwindet die Transparenz mit Text und der Benutzer kann suchen die Karte wie erwartet. Irgendwelche Hinweise, wie das geht?

Katan
quelle

3

Fügen Sie Stil hinzu pointer-events:none;, der gut funktioniert

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

Mohan
quelle

3

Der einfachste Weg, dies zu tun, ist die Verwendung eines Pseudoelements wie :beforeoder :after.
Diese Methode erfordert keine zusätzlichen HTML-Elemente oder JQuery.
Wenn wir zum Beispiel diese HTML-Struktur haben:

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

Dann müssen wir nur noch den Wrapper relativ zu dem Pseudoelement erstellen, das wir erstellen, um das Scrollen zu verhindern

.map_wraper{
    position:relative;
}

Danach erstellen wir das Pseudoelement, das über der Karte positioniert wird, um das Scrollen zu verhindern:

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

Und du bist fertig, keine Abfrage, keine zusätzlichen HTML-Elemente! Hier ist ein funktionierendes jsfiddle-Beispiel: http://jsfiddle.net/e6j4Lbe1/

Andrei
quelle

Clevere Idee. Wie bei einigen anderen Antworten wird jedoch alles erfasst, nicht nur Mausradereignisse.

likeitlikeit

Ich bin froh, dass es dir geholfen hat!

Andrei

3

Hier ist meine einfache Lösung.

Setzen Sie Ihren Iframe in ein Div mit einer Klasse namens "maps".

Dies ist das CSS für Ihren Iframe

.maps iframe { pointer-events: none }

Und hier ist ein kleines Javascript, das die Zeigerereignisseigenschaft des Iframes auf "auto" setzt, wenn Sie das div-Element mindestens 1 Sekunde lang bewegen (funktioniert am besten für mich - setzen Sie es auf einen beliebigen Wert) und das Timeout löscht / Setzen Sie es erneut auf "keine", wenn die Maus das Element verlässt.

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

Prost.

iXzellent
quelle

3

Ich habe ein sehr einfaches jQuery-Plugin erstellt, um das Problem zu beheben. Überprüfen Sie es unter 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>

Erweitern Sie das Snippet

Emiliano Díaz
quelle

2

Mit der Antwort von @nathanielperales habe ich die Schwebefunktion hinzugefügt, weil es für mich besser funktioniert, wenn der Benutzer den Fokus auf die Karte verliert, um das Scrollen wieder zu beenden :)

$(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
quelle

Die Sache ist, dass wir die Navigationsfunktion verlieren, für mich ist das bei mobilen Geräten sehr wichtig. Ich habe ein sehr einfaches jQuery-Plugin erstellt, das Sie bei Bedarf ändern können. Überprüfen Sie es auf github.com/diazemiliano/mapScrollOff

Emiliano Díaz

2

Variationen eines Themas: Eine einfache Lösung mit jQuery, keine CSS-Bearbeitung erforderlich.

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

Der Hover-Listener ist an das übergeordnete Element angehängt. Wenn also das aktuelle übergeordnete Element größer ist, können Sie den Iframe einfach vor der 3. Zeile mit einem Div umschließen.

Hoffe, es wird für jemanden nützlich sein.

bencergazda
quelle

1

Ich bin selbst auf dieses Problem gestoßen und habe ein Mashup von zwei sehr nützlichen Antworten auf diese Frage verwendet: Czerasz 'Antwort und Massa .

Beide haben eine Menge Wahrheit, aber irgendwo in meinen Tests habe ich herausgefunden, dass eines nicht für Handys funktioniert und schlechte IE-Unterstützung hat (funktioniert nur auf IE11). Dies ist die Lösung von nathanielperales, die dann von czerasz erweitert wurde, die auf Zeigerereignissen css basiert und auf Mobilgeräten nicht funktioniert (es gibt keinen Zeiger auf Mobilgeräten) und auf Mobilgeräten nicht funktioniert keiner Version von IE, die nicht v11 ist . Normalerweise würde es mich nicht weniger interessieren, aber es gibt eine Menge Benutzer da draußen und wir wollen eine konsistente Funktionalität. Deshalb habe ich mich für die Overlay-Lösung entschieden und einen Wrapper verwendet, um das Codieren zu vereinfachen.

Mein Markup sieht also so aus:

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

Dann sind die Stile wie folgt:

.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*/
}

Zuletzt das Drehbuch:

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

Ich habe meine getestete Lösung auch in einem GitHub-Gist hinzugefügt , wenn Sie Sachen von dort bekommen möchten ...

EffectiX
quelle

1

Dies ist eine Lösung mit CSS und Javascript (dh Jquery, funktioniert aber auch mit reinem Javascript). Gleichzeitig reagiert die Karte. Vermeiden Sie das Zoomen der Karte beim Scrollen, aber die Karte kann durch Klicken aktiviert werden.

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 */
}

Habe Spaß !

Jean
quelle

1

In Google Maps v3 können Sie jetzt das Scrollen zum Zoomen deaktivieren, was zu einer viel besseren Benutzererfahrung führt. Andere Kartenfunktionen funktionieren weiterhin und Sie benötigen keine zusätzlichen Divs. Ich dachte auch, dass es ein Feedback für den Benutzer geben sollte, damit er sehen kann, wenn das Scrollen aktiviert ist, also habe ich einen Kartenrand hinzugefügt.

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

1

Dadurch erhalten Sie eine reaktionsschnelle Google Map, die das Scrollen auf dem Iframe stoppt. Sobald Sie jedoch darauf klicken, können Sie zoomen.

Kopieren Sie diese und fügen Sie sie in Ihr HTML ein, aber ersetzen Sie den Iframe-Link durch Ihren eigenen. Er ist ein Artikel darüber mit einem Beispiel: Deaktivieren Sie den Maus-Scrollrad-Zoom in eingebetteten Google Map-Iframes

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

0

Hier wäre mein Ansatz dazu.

Pop dies in meine main.js oder ähnliche Datei:

// 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');

Fügen Sie dann einfach ein leeres Div ein, in das die Karte auf Ihrer Seite erscheinen soll.

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

Sie müssen natürlich auch die Google Maps-API aufrufen. Ich habe einfach eine Datei namens mapi.js erstellt und in meinen Ordner / js geworfen. Diese Datei muss vor dem obigen Javascript aufgerufen werden.

`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");
})();`

Stellen Sie beim Aufrufen der Datei mapi.js sicher, dass Sie das Attribut sensor false übergeben.

dh: <script type="text/javascript" src="js/mapi.js?sensor=false"></script>

Die neue Version 3 der API erfordert aus irgendeinem Grund die Einbeziehung eines Sensors. Stellen Sie sicher, dass Sie die Datei mapi.js vor Ihrer Datei main.js einfügen.

Chad Warren
quelle

0

Für Google Maps v2 - GMap2:

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

user956584
quelle

0

Wenn Sie einen Iframe haben, der die in Google Map eingebettete API wie folgt verwendet:

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

Sie können diesen CSS-Stil hinzufügen: Zeiger-Ereignis: keine; 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
quelle

0

Hier ist meine Sicht auf die Antwort von @nathanielperales, erweitert um @chams, jetzt wieder erweitert von mir.

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
quelle

0

Das einfachste :

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

0

Fügen Sie dies Ihrem Skript hinzu:

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
quelle

2

Die Frage bezieht sich auf die Embed-API (unter Verwendung eines Iframes), nicht auf die JavaScript-API.

GreatBlakes

0

Hier ist meine Lösung für das Problem: Ich habe eine WP-Site erstellt, daher gibt es hier einen kleinen PHP-Code. Der Schlüssel befindet sich jedoch scrollwheel: false,im Kartenobjekt.

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

Hoffe das wird helfen. Prost

Djordje Arsenovic
quelle

Deaktivieren Sie den Maus-Scrollrad-Zoom in eingebettetem Google Maps

Antworten: