-2
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 -->
Poxa perfect thanks bro, I thought it was a bug in the script and was actually a kkkkk api function. Valeu worked perfectly and I’m digging into the documentation to better understand the map. Hugs
– Dinho Braga