Wyłączanie scroll zooma w google map.

pytanie zadane 9 lutego 2016 w HTML i CSS przez Mateusz Stawicki Nowicjusz (120 p.)

Witam,

mam na stronie mapkę w iframie i niestety jest tak umiejscowiona, że przejeżdżanie w dół strony scrollem powoduje, że myszka zatrzymuje się na tej mapce i ją zoomuje.

Ustawiłem "pointer-events: none;" i poskutkowało, ale jednocześnie zrobiło z niej statyczną mapkę, a nie o to mi chodziło.

Chcę po prostu wyłączyć funkcje zoomowania scrollem a resztę zostawić w spokoju.

przykład na tej stronie nad stopką: http://www.agisfs.pl/pl/kontakt

1 odpowiedź

odpowiedź 9 lutego 2016 przez Czort Nałogowiec (32,500 p.)

scrollwheel: false

Powinno zadziałać.

komentarz 9 lutego 2016 przez Mateusz Stawicki Nowicjusz (120 p.)

Nie dodałem mapki przez API tylko przez Iframe.

komentarz 9 lutego 2016 przez Czort Nałogowiec (32,500 p.)

Z tego co mi wiadomo to się nie da w iframe samego scrolla wyłączyć. Można jedynie wyłączyć wszystkie pointer-events a po kliknięciu na mapę z powrotem włączyć:

http://stackoverflow.com/questions/21992498/disable-mouse-scroll-wheel-zoom-on-embedded-google-maps

komentarz 9 lutego 2016 przez Mateusz Stawicki Nowicjusz (120 p.)

A mógłbyś wytłumaczyć mi jak dodaję się mapkę z API, bo moja aktualna jest responsywna i chciałbym, żeby tak pozostało.

komentarz 9 lutego 2016 przez Czort Nałogowiec (32,500 p.)

<body>
    <div id="map"></div>
    <script>
      function initMap() {
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
          center: {lat: 44.540, lng: -78.546},
          zoom: 8
        });
      }
    </script>
    <script src="https ://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
</body>

Krok po kroku: https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

Co do responsywności to po prostu stylujesz #map według swoich upodobań.