Is it possible to disable the zoom of an embedded Google Maps when scrolling?

Question

Is it possible to disable the zoom of an embedded Google Maps when scrolling?

Navigation

#1 by (2 votes)

1

Hello good night everyone, I continue with my project in a teaching institution and I have encountered a problem that I hope you can help me solve. Using Google Maps I added a map to the website as seen below:

I include the code I use:

<div class="text-center">
    <h2>¿Dónde nos encontramos?</h2>
    <hr>
<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h3 class="text-center text-muted">Texcoco</h3>
        <div class="embed-responsive embed-responsive-16by9">
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15078.060297406828!2d-98.7672826!3d19.1289181!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xec6eed4489e6a338!2sSanta+Catalina+de+Siena+Amecameca!5e0!3m2!1ses-419!2smx!4v1502307796735" width="400" height="300" frameborder="0" style="border:0" allowfullscreen class="embed-responsive-item"></iframe>
        </div>
    </div>
</div>
</div>

The problem here is that when the user goes down on the page, when he reaches the map, he begins to reduce the zoom due to scroll making navigation and the location of the institution somewhat difficult and annoying.

My question is, Is there any way to "turn off" the zoom by scrolling the map so that it can only be increased by the buttons? Searching the internet I found that a possible solution would be using the Google Maps API to obtain a static map, but for this I must pay a fee to obtain a key, I think. I hope you can help me, thanks:)

html bootstrap google-maps scroll zoom

asked by alexchvrches 10.08.2017 в 06:53

source

1 answer

Warning when trying to delete a file Error connecting Java to SQL Server with JDBC

score 2 · Accepted Answer

Stackoverflow raised the same question . There are many answers, most propose to disable mouse events in iframe with CSS:

pointer-events: none

The good thing about this is that you can enable it again with:

pointer-events: auto

The idea is that by default they are disabled and by clicking on the iframe they are enabled again to be able to navigate the map normally and when leaving the map they are disabled again.

There is one of the answers that you do with jQuery very easily, this is the example with your code (I add text to be able to scroll and see how it works):

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

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

.embed-responsive iframe {
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="text-center">
  <h2>¿Dónde nos encontramos?</h2>
  <hr>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum itaque et ex odio earum minus, corrupti repudiandae fugiat est tenetur. Quos eum distinctio, numquam. Quisquam deserunt quibusdam quia qui ad, illo quasi dolorem cumque facere id. Sunt necessitatibus sit minima ipsam, facere perferendis dolores optio debitis voluptatibus. Cupiditate explicabo, itaque iure saepe temporibus impedit, officiis mollitia expedita corporis velit optio consectetur dolorem. Qui at corrupti voluptate debitis blanditiis atque, repellendus iusto! Molestias rerum fugiat suscipit, ratione! Eos cupiditate dolores reiciendis, libero sapiente explicabo. Blanditiis officiis ratione rerum non ipsum, delectus culpa quia doloribus eveniet itaque ex hic commodi consequuntur voluptatem.
  </p>
  <p>Hic harum velit accusantium a commodi pariatur optio saepe voluptatibus, enim assumenda obcaecati doloremque ex maxime nihil vero corporis maiores ad minus, minima molestias repudiandae odit. Ex quasi obcaecati animi quia praesentium laborum, provident consequuntur asperiores cupiditate facere? Rem voluptatem sunt sint mollitia eos ipsa in laudantium sed reprehenderit minus porro repudiandae illum quas, sapiente, cumque quo ipsum omnis ducimus nemo molestias. Modi ea consectetur eius incidunt, hic illo eum ipsam libero omnis explicabo iure sit sapiente illum aspernatur, odio minus aliquam quidem fugiat odit assumenda, voluptas, facere esse adipisci laborum. Nihil molestias, qui quod iure vitae, ipsa earum deleniti!</p>
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <h3 class="text-center text-muted">Texcoco</h3>
      <div class="embed-responsive embed-responsive-16by9">
        <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15078.060297406828!2d-98.7672826!3d19.1289181!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xec6eed4489e6a338!2sSanta+Catalina+de+Siena+Amecameca!5e0!3m2!1ses-419!2smx!4v1502307796735"
        width="400" height="300" frameborder="0" style="border:0" allowfullscreen class="embed-responsive-item"></iframe>
      </div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum itaque et ex odio earum minus, corrupti repudiandae fugiat est tenetur. Quos eum distinctio, numquam. Quisquam deserunt quibusdam quia qui ad, illo quasi dolorem cumque facere id. Sunt necessitatibus sit minima ipsam, facere perferendis dolores optio debitis voluptatibus. Cupiditate explicabo, itaque iure saepe temporibus impedit, officiis mollitia expedita corporis velit optio consectetur dolorem. Qui at corrupti voluptate debitis blanditiis atque, repellendus iusto! Molestias rerum fugiat suscipit, ratione! Eos cupiditate dolores reiciendis, libero sapiente explicabo. Blanditiis officiis ratione rerum non ipsum, delectus culpa quia doloribus eveniet itaque ex hic commodi consequuntur voluptatem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum itaque et ex odio earum minus, corrupti repudiandae fugiat est tenetur. Quos eum distinctio, numquam. Quisquam deserunt quibusdam quia qui ad, illo quasi dolorem cumque facere id. Sunt necessitatibus sit minima ipsam, facere perferendis dolores optio debitis voluptatibus. Cupiditate explicabo, itaque iure saepe temporibus impedit, officiis mollitia expedita corporis velit optio consectetur dolorem. Qui at corrupti voluptate debitis blanditiis atque, repellendus iusto! Molestias rerum fugiat suscipit, ratione! Eos cupiditate dolores reiciendis, libero sapiente explicabo. Blanditiis officiis ratione rerum non ipsum, delectus culpa quia doloribus eveniet itaque ex hic commodi consequuntur voluptatem.</p>
  </div>
</div>