Disable zoom google maps does not work

Asked

Viewed 3,426 times

3

I implemented a iframe with a Google Maps map, the problem is that I wanted to disable the scrool zoom and the drag. I’ve tried this code in and out of jQuery function and it doesn’t work:

HTML:

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

JS:

var mapOptions = {
     zoom: 17, 
    draggable: false,
    center: new google.maps.LatLng(-34.397, 150.644),
    zoomControl: false,
    scrollwheel: false,
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
javascript google-maps

  • I don’t have a definitive answer yet, but according to my understanding of that question in the SOEN that nay is possible if your map is using embed.

  • What would be the alternative? Obgado

  • Try this solution: http://stackoverflow.com/questions/21992498/disable-mouse-scroll-wheel-zoom-embedded-google-maps I believe this will solve your problem. []’s

3 answers

2

According to that answer and that comment in SOEN, it is not possible to customize the behavior of the maps used in the embed. Your problem seems to be that you are trying to do both at the same time: insert the map into one iframe (embed) and create it from the Javascript API.

Try to replace your iframe by a div ordinary, empty:

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

And then use your code as is:

var mapOptions = {
    //zoom: 17,
    draggable: false,
    zoomControl: false,
    scrollwheel: false,
}
map = new google.maps.Map( document.getElementById("map"), mapOptions);

You will need to put additional parameters to specify where is being mapped, but the API functions should work normally in this mode (I can’t tell if the zoom is mermo necessary, or if it admits a default value, then I am including it here commented).

  • Where do I put these parameters (google maps link)? dsculpe a ignorancia muito obgado

  • 1

    var map = new google.maps.Map(Document.getElementById("map"), mapOptions);

  • @Miguel Unfortunately I don’t have much experience with this API either, so I don’t know. This tutorial (in English) has some information, but not all. The key here is that you do not make a "link" pro google maps, you let the API itself create this link for you. All you pass are parameters. But what are all the parameters available, that I can not say... If you are using coordinates, one of them is easy: center: { lat:39.139547, lng:-8.900489 } (This goes with the mapOptions).

2


Here’s a full code that works the zoom lock:

    <!doctype html>
    <html lang="pt,BR">
    <head>
        <meta charset="UTF-8">
        <title>API Google Maps V3</title>

        <!-- Inicialização do mapa -->
        <script>
        function initialize() {

      // Exibir mapa;
      var myLatlng = new google.maps.LatLng(-8.0631495, -34.87131120000004);
      var mapOptions = {
        zoom: 17,
        center: myLatlng,
        panControl: false, 
    draggable: false,
        zoomControl: false,
        scrollwheel: false,
        // mapTypeId: google.maps.MapTypeId.ROADMAP
        mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
        }
      }
      // Exibir o mapa na div #mapa;
      var map = new google.maps.Map(document.getElementById("mapa"), mapOptions);

      // crio um objeto passando o array de estilos (styles) e definindo um nome para ele;
      var styledMap = new google.maps.StyledMapType(styles, {
        name: "Mapa Style"
      });
      // Aplicando as configurações do mapa
      map.mapTypes.set('map_style', styledMap);
      map.setMapTypeId('map_style');

    }

    // Função para carregamento assíncrono
    function loadScript() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDeHb17So0QupSGO_d6b8X-OyvJ32UQehs&sensor=true&callback=initialize";
      document.body.appendChild(script);
    }

    window.onload = loadScript;
    </script>

        <style>
            #mapa{
                width: 100%;
                height: 500px;
                border: 1px solid #ccc;
            }
        </style>

    </head>

    <body>
        <div id="mapa"></div>
    </body>
    </html>

  • It served you, man?

  • Anyway thanks.

  • Turned out obgado

0

For you to put that zoom control is false, before you will have to specify which portion of the desired zoom.

 var mapOptions = {
     zoom: 17, //Por exemplo
     draggable: false,
     zoomControl: false,
     scrollwheel: false,
 }
 map = new google.maps.Map(document.getElementById("map"), mapOptions);

 $(document).ready(function() {...

Try it like this:

 map.getMinimumResolution=function() { 
   return 17; 
 }; 

 map.getMaximumResolution=function() { 
    return 17; 
 };

If it doesn’t work try adding that:

scaleControl: false,

map.disableScrollWheelZoom();

  • I updated and uploaded the page with this tip but did not solve. Obgado

  • Is this answer even an answer or was it a comment?

Browser other questions tagged javascript google-maps

You are not signed in. Login or sign up in order to post.