CODEWITHSUNDEEP
htmlgoogle-mapsmapsscrollzooming
Kakarotto57
Kakarotto57

Reputation: 59

Disable Zoom on new Google Maps Engine

I'm trying to disable the scrolling/zooming in and out aspect of this page:

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

Everytime I scroll past it it it just zooms in, how can I disable it?

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

Upvotes: 5

Views: 5179

Answers (2)

Emiliano D&#237;az
Emiliano D&#237;az

Reputation: 694

If you are using the "Map iFrame" or "API", I've made a plugin that I use for solve this issue. Can you check it in https://github.com/diazemiliano/googlemaps-scrollprevent

Here's some example.

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

Upvotes: 1

Guilherme
Guilherme

Reputation: 1835

The better way to custom google maps is to work directly with the google maps api. For the specific case, you can set the scrollwheel false in the map options and disable the scrolling/zooming

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

Upvotes: 2

Related Questions