Отключить Масштаб на новой Google Карту Engine

Question

Я пытаюсь отключить прокрутки/увеличение и уменьшение масштаба аспекта этой страницы:

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

Everytime прокручивает прошлую эти им просто увеличивает масштаб, как может Я отключил его?

<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

Лучший способ настройки пользовательских карт Google - работать непосредственно с картами google api. Для конкретного случая, вы можете установить ложных колесо прокрутки в настройках карты и отключить скроллинг/масштабированием

<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

Если вы используете «Map IFrame» или «API», я имею сделал плагин, который я использую для решения этой проблемы. Вы можете его проверить в https://github.com/diazemiliano/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>