Disable Phóng to trên Google Maps mới Động cơ

Question

Tôi đang cố gắng để vô hiệu hóa di chuyển/phóng to và khía cạnh ra khỏi trang này:

http://s1magazine.co.uk/NSA/pages/services/

Mỗi lần tôi di chuyển qua nó nó nó chỉ phóng to, làm thế nào có thể Tôi vô hiệu hóa nó?

<h2>NSA is a national competition happening throughout England.</h2> 
<h2><!-- Responsive iFrame --> 
<!-- Responsive iFrame --></h2> 
<div class="Flexible-container"><iframe src="http://mapsengine.google.com/map/u/0/embed? mid=zyaBPLJJ7er8.kdbvNz_CrEYk" height="350" width="425" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> 

Answer 1

Cách tốt nhất để tùy chỉnh bản đồ google là làm việc trực tiếp với api bản đồ google. Đối với trường hợp cụ thể, bạn có thể thiết lập scrollwheel sai trong tùy chọn đồ và vô hiệu hóa các di chuyển/phóng to

<style> 
    html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
    } 
</style> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script> 
    var map; 
    function initialize() { 
     var mapOptions = { 
      zoom: 8, 
      center: new google.maps.LatLng(-34.397, 150.644), 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      scrollwheel: false 
     }; 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 

</script> 


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

Answer 2

Nếu bạn đang sử dụng "Bản đồ iFrame" hoặc "API", tôi đã tạo một plugin mà tôi sử dụng để giải quyết vấn đề này. Bạn có thể kiểm tra xem nó trong https://github.com/diazemiliano/googlemaps-scrollprevent

Dưới đây là một số ví dụ.

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