3

Implementei um iframe com um mapa do Google Maps, o problema é que eu queria desativar o scrool zoom e o drag. Já tentei este código dentro e fora da função jQuery e não resulta:

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);
3

3 Respostas 3

2

Aqui vai um código completo que funciona o bloqueio do zoom:

    <!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>
3
  • Serviu pra você cara? Commented 19/03/2014 às 18:40
  • De qualquer jeito obrigado. Commented 19/03/2014 às 18:43
  • Resultou obgado
    – Miguel
    Commented 19/03/2014 às 18:44
2

Segundo essa resposta e esse comentário no SOEN, não é possível customizar o comportamento dos mapas utilizados no modo embed. Seu problema parece ser que você está tentando fazer as duas coisas ao mesmo tempo: inserir o mapa num iframe (embed) e criá-lo a partir da API JavaScript.

Experimente substituir seu iframe por uma div comum, vazia:

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

E em seguida usar seu código tal como está:

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

Você terá de colocar parâmetros adicionais para especificar onde está sendo mapeado, mas as funções da API devem funcionar normalmente nesse modo (não sei dizer se o zoom é mermo necessário, ou se ele admite um valor padrão, então estou incluindo ele aqui comentado).

3
  • Onde coloco esses parametros (link do google maps)? dsculpe a ignorancia muito obgado
    – Miguel
    Commented 19/03/2014 às 18:18
  • 1
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); Commented 19/03/2014 às 18:28
  • @Miguel Infelizmente eu também não tenho muita experiência com essa API, então não sei te informar. Esse tutorial (em inglês) tem algumas informações, mas não todas. A chave aqui é que você não faz um "link" pro google maps, você deixa a própria API criar esse link pra você. Tudo o que você passa são parâmetros. Mas quais são todos os parâmetros disponíveis, isso eu não sei dizer... Se você está usando coordenadas, um deles é fácil: center: { lat:39.139547, lng:-8.900489 } (isso vai junto dos mapOptions).
    – mgibsonbr
    Commented 19/03/2014 às 18:32
0

Para você colocar que controle do zoom é falso, antes você terá que especificar qual a porcetagem do zoom desejado.

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

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

Tente assim:

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

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

Se não funcionar tente acrescentar isso:

scaleControl: false,

map.disableScrollWheelZoom();
2
  • Fiz o update em cima e upload da pagina com essa dica mas não resolveu. Obgado
    – Miguel
    Commented 19/03/2014 às 17:56
  • Esta resposta é mesmo resposta ou foi um comentário?
    – Sergio
    Commented 10/01/2016 às 8:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .