scroll down to map region - google maps

Question

Speak, guys, I still have little experience and I have a very annoying little problem. When I create a page with a map, when I access this page, the scroll goes to where the map is. I discovered (actually I think) that the problem is related to the "X" close button script that has the class. gm-ui-Hover-Effect - because when I force it with display: None! Mportant; the problem stops happening. But... that’s not a solution, it’s just a way to get away from the problem. Could someone with more knowledge help with this??? : ) "Obs: the problem only happens online, you can’t reproduce on the localhost, you have to go up in any hosting example".

To illustrate better, I went to this address that will stay a short time, Page with map but anyway the code is below:

Thanks ;)

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

Answer 1

Just look at the documentation on each method you are using, see: Infowindowopenoptions

The default is to scroll to display the infoWindow when available, to "make it intuitive" probably, but as the documentation indicates you can turn it off by setting the shouldFocus as false, it’s not even a matter of "scroll", actually what happens is infowindow becomes the object in "focus", so who scrolls is the browser itself, because objects in focus should be inside the view-port.

Example:

infoWindow.open({
    anchor: marker,
    map: map, /*opcional, já que tem o anchor que possui o map definido*/
    shouldFocus: false
});