Retirando scroll do iframe do Google maps

Olá pessoal tudo certo, hoje quero compartilhar com vocês uma solução viável e relativamente rápida que encontrei para resolver um probleminha com o iframe pego no google maps para ser incorporado em um site.
O problema era o seguinte , ao incorporar o iframe do google maps no site e usar o scroll do mouse sobre o mapa é ativado o controle de zoom do iframe, sendo assim se  alguma informação do site abaixo do mapa o scroll é interrompido, veja você mesmo no iframe abaixo :

Ficou difícil seguir o fluxo com o scroll passando sobre o mapa ? sim eu sei mas graças a Deus a web é um lugar onde" quase" todos contribuem e compartilham conhecimento e informação , então pesquisando na web afim de solucionar o problema do cliente achei a solução no site/fórum : stackoverflow sim nós desenvolvedores não precisamos reinventar a roda  , mas sim adaptar algumas soluções ao nosso contexto,vou mostrar como implementar a solução. 

1) Use este script em JavaScript para controlar os eventos do mouse :

 // Disable scroll zooming and bind back the click event  
 var onMapMouseleaveHandler = function (event) {  
  var that = $(this);  
  that.on('click', onMapClickHandler);  
  that.off('mouseleave', onMapMouseleaveHandler);  
  that.find('iframe').css("pointer-events", "none");  
 }  
 var onMapClickHandler = function (event) {  
  var that = $(this);  
  // Disable the click handler until the user leaves the map area  
  that.off('click', onMapClickHandler);  
  // Enable scrolling zoom  
  that.find('iframe').css("pointer-events", "auto");  
  // Handle the mouse leave event  
  that.on('mouseleave', onMapMouseleaveHandler);  
 }  
 // Enable map zooming with mouse scroll when the user clicks the map  
 $('.maps.embed-container').on('click', onMapClickHandler);  

2) vai precisar de um pouco de CSS : 

 

 .content-container {  
   margin-top: 10px;  
   width: 100%; height: 100px;    
   background: rgba(255, 0, 0, .1);  
   text-align: center;  
 }  

3) Você vai precisar colocar seu iframe dentro de uma div que vai conter o classe do CSS Acima e sera usado a propriedade pointer-events:none;, pode ser tanto no css externo como em um css inline(apesar do inline não ser a melhor prática) o HTML ficaria assim : 

 

 <div class='content-container embed-container  map '>  
  <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3170.682936123606!2d-51.216044!3d-30.036268000000003!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x951978534879152d%3A0xa9522f5e1a9af85b!2sParque+Farroupilha!5e1!3m2!1spt-BR!2sbr!4v1422075381018" width="600" height="450" frameborder="0" style=" pointer-events:none;border:0"></iframe>  
 </div>  

4) Agora é só apreciar o iframe funcionando sem interferência no fluxo da página Veja os código no iframe, o evento de scroll só funciona depois do click do mouse sobre o mapa :
Agora você deve estar se perguntando não existe uma API do google maps onde eu possa personalizar isto nos meus mapas ? SIM existe só que no meu caso erá manutenção em um portal os  iframes já tinha sido encorporados,  o cliente queria uma solução rápida sem muita perda de tempo, segue a documentação para api do google maps: API MAPS
Espero ter ajudado pessoal,qualquer duvida deixe um comentário.

Share on Google Plus

Sobre Unknown

Administrador e autor do blog hostconfig.