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 -->