by: Aurelia SypniewskaPosted on:

Wyłączenie przybliżenia scroll’em na mapach Google

Czas czytania: 2 minut

Obecnie bardzo popularne stały się Mapy bezpośrednio pochodzące z Google (Google Maps) na całą szerokość strony (bez użycia API).

Z pewnością jest to bardzo ciekawy efekt. Jednak nie każdy zdaje sobie mapy udostępnione bezpośrednio z http://google.pl/maps/ w postaci iframe mają pewną wadę podczas przewijania scrollem myszy zaczynają przybliżać lub oddalać widok zamiast przesuwać nas dalej po stronie. Przybliżenie to jest domyślne.

Mimo to istnieją strony, posiadające mapy z Google na prawie całą szerokość i wysokość okna przeglądarki a jakoś nikt w nich nie utyka powiększając i zmniejszając. W tym poście postaram się pokazać jak zablokować funkcję scroll’a tak by scrollowanie nie było możliwe.

Metoda 1 wstawiania mapy – JavaScript

na podstawie http://web4you.com.pl/

Do tego celu użyjemy poniższego kodu. Po wprowadzeniu kodu powinniśmy mieć mapę na stronie mapę Polski o wymiarach 600px/400px

      
      

    Google Maps JavaScript API v3 - Twoja pierwsza mapa

Jak ustawić mapę na nasze parametry:

Lokalizacje na mapie określają:

var lat=52.173931692568;
var lng=18.8525390625;

Z kolei oddalenie to

var zoom=6;

A teraz wprowadzimy własne ustawienia zaczniemy od wejścia na stronę google maps i wyszukanie interesującej nas lokalizacji. Następnie pobieramy jej adres np:

https://www.google.pl/maps/place/Pozna%C5%84+City+Center/@52.4017401,16.9114558,16.75z/data=!4m12!1m9!4m8!1m0!1m6!1m2!1s0x47045b322b18c34f:0x145700ff326653af!2sPozna%C5%84+City+Center,+Matyi+2,+61-586+Pozna%C5%84!2m2!1d16.9142474!2d52.4019381!3m1!1s0x47045b322b18c34f:0x145700ff326653af

W powyższym liku szukamy parametru „/@” i zakończonego „/”. W tym przypadku to /@52.4017401,16.9114558,16.75z/.

Teraz modyfikuje wartości skryptu:

lat=52.4017401
lng=16.9114558
zoom=16

Po zapisaniu na mapie powinien się pojawić wybrany obszar w moim przykładzie będzie to dworzec główny PKP w Poznaniu.

Jak zablokować scrollowanie mapy

W celu zablokowania wystarczy dodać:

scrollwheel:false,

kod wstawiamy pomiędzy:

 var myOptions = {
}

Czyli dodajemy jako kolejną opcje.

Metoda 2 wstawiania – HTML i CSS

Metoda ta przydaje się jeśli użyjemy mapy bezpośrednio ze strony Google w formie iframe. Zacznijmy więc od podstaw:

Przykładowa mapa
Jak zablokować scrollowanie mapy

Istnieje kilka metod blokowania map tego typu jedną z nich jest wyłączenie obsługi scroll

W celu uzyskania tego efektu w HTML wstawiamy kod mapy pomiędzy

Następnie w CSS

.maps iframe{
    pointer-events: none;
}

Teraz po najechaniu myszką ma mapę nie będzie się ona scrolować a tym samym będziemy mogli normalnie poruszać się po stronie.

W tym przypadku oczywiście możemy również skorzystać JavaScript / jQuery.
Przykładowe użycie:

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none"); 
});

Innym sposobem jest nałożenie na mapę DIV posiadającego takie same wymiary co mapa.

HTML

CSS

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

Ostateczny wybór metody zablokowania mapy zależy od nas jak widać mamy kilka opcji.

źródła:
http://stackoverflow.com/questions/21992498/disable-mouse-scroll-wheel-zoom-on-embedded-google-maps

dodatkowe tagi:
jak wyłączyć scroll w Google Maps
Wyłączanie scroll zooma w google map
mapa bez zbliżenia i oddalania
Mapy z Google
Jak wyłączyć scrollowanie na mapach
Wyłączenie przybliżenia scroll’em- gMap