-2

Fala galera, ainda tenho pouca experiência e estou com um probleminha bem chato. quando crio uma página com um mapa, ao acessar esta página, o scroll vai para o local onde está o mapa. eu descobri (na verdade eu acho) que o problema é relacionado ao script do botão de fechar "X" que possui a classe .gm-ui-hover-effect - pois quando eu forço com display: none!important; o problema para de acontecer. mas... isso não é uma solução, é apenas um jeito de fugir do problema. Alguém que tenha mais conhecimento poderia ajudar com isso??? :) "obs: o problema só acontece online, não da pra reproduzir no localhost, necessário subir numa hospedagem qualquer de exemplo".

Pra exemplificar melhor, subí neste endereço que vai ficar pouco tempo, Página com mapa mas de qualquer forma o código está abaixo:

Valeu ;)

function init_map() {
    var myOptions = {
        zoom: 13,
        center: new google.maps.LatLng(-23.09401258715213, -46.43584007282058),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
        map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
        marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(-23.09401258715213, -46.43584007282058)
    });
        infowindow = new google.maps.InfoWindow({
        content: 'Informações do Local Aqui'
    });
        google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(map, marker);
    });
        infowindow.open(map, marker);
}
    google.maps.event.addDomListener(window, 'load', init_map);
.div{
    width: 100%;
    height:700px;
}
.div1{
    background-color:red;
}
.div2{
    background-color:blue;
}
.div3{
    background-color:yellow;
    height: 30px;
    margin-bottom: 10px;
}
/********************************** GOOGLE MAPS **********************************/
#gmap {
    overflow: hidden;
    height: 360px;
    width: 100%;
    color: #1795eb;
}
#gmap_canvas {
    width:100%;
    height:100%;
}
#gmap_canvas img {
    max-width: none !important;
    background: none !important;
}
.gm-ui-hover-effect{
    /* display: none!important; */
}
<div class="div div1">
  <h1><strong>A página deveria carregar aqui encima</strong></h1>

</div>
<div class="div div2">

</div>
<div class="div div3">
  <h1><strong>Mas carrega aqui embaixo na regiao do mapa</strong></h1>
</div>
<script src='https://maps.google.com/maps/api/js?key=AIzaSyDKQxQ04ZVdhro4LHnadEnG0F_ygaZcGQs'></script>
<!-- MAPA -->
<div id="gmap">
  <div id="gmap_canvas"></div>
</div>
<!-- MAPA -->

1 Resposta 1

1

Basta olhar na documentação sobre cada método que você esta usando, veja: InfoWindowOpenOptions

O padrão é rolar para exibir o infoWindow quando disponível, para "tornar intuitivo" provavelmente, mas como a própria documentação indica você pode desligar isso setando o shouldFocus como false, não é nem questão de "scroll", na verdade o que ocorre é do infoWindow se torna o objeto em "foco", então quem faz a rolagem é o próprio navegador, pois objetos em foco devem ficar dentro do view-port.

Exemplo:

infoWindow.open({
    anchor: marker,
    map: map, /*opcional, já que tem o anchor que possui o map definido*/
    shouldFocus: false
});
1
  • Poxa perfeito obrigado mano, eu pensei que era um bug no script e na verdade era uma função da api kkkkk. Valeu funcionou perfeitamente e estou fuçando um pouco na documentação pra entender melhor o mapa. Abraços Commented 13/06/2021 às 16:27

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 .