admin管理员组文章数量:1327308
There seems to be an odd behavior in Google Chrome v84 when closing an InfoWindow in a Google Map embedded in a webpage using the JavaScript API:
Whenever the page is not scrolled to the top, clicking the close button on an InfoWindow makes the scroll position of the page jump by 15px
down.
This did not happen in Version 83 and lower.
- New issue in the tracker:
- JSFiddle demo: /
Here is a simple reproducible example. Scroll the page down until the map is in the viewport, click the marker, close the Infowindow, the page will scroll down by 15px
.
function initialize() {
const mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(0, 0)
};
const map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
const marker = new google.maps.Marker({
position: new google.maps.LatLng(0, 0),
map: map,
title: 'Nothing here'
});
const infowindow = new google.maps.InfoWindow({
content: 'Hello World'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
displayVerticalOffset();
});
window.onscroll = function() {
displayVerticalOffset();
};
}
function displayVerticalOffset() {
document.getElementById('pageYOffset').innerHTML = 'Vertical offset: ' + window.pageYOffset + 'px'
}
#map-canvas {
margin-top: 800px;
height: 180px;
width: 180px;
}
#pageYOffset {
margin-bottom: 800px;
}
<div id="map-canvas"></div>
<div id="pageYOffset"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src=";callback=initialize" async defer></script>
There seems to be an odd behavior in Google Chrome v84 when closing an InfoWindow in a Google Map embedded in a webpage using the JavaScript API:
Whenever the page is not scrolled to the top, clicking the close button on an InfoWindow makes the scroll position of the page jump by 15px
down.
This did not happen in Version 83 and lower.
- New issue in the tracker: https://issuetracker.google./issues/163214518
- JSFiddle demo: http://jsfiddle/upsidown/hb1dx5a3/
Here is a simple reproducible example. Scroll the page down until the map is in the viewport, click the marker, close the Infowindow, the page will scroll down by 15px
.
function initialize() {
const mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(0, 0)
};
const map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
const marker = new google.maps.Marker({
position: new google.maps.LatLng(0, 0),
map: map,
title: 'Nothing here'
});
const infowindow = new google.maps.InfoWindow({
content: 'Hello World'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
displayVerticalOffset();
});
window.onscroll = function() {
displayVerticalOffset();
};
}
function displayVerticalOffset() {
document.getElementById('pageYOffset').innerHTML = 'Vertical offset: ' + window.pageYOffset + 'px'
}
#map-canvas {
margin-top: 800px;
height: 180px;
width: 180px;
}
#pageYOffset {
margin-bottom: 800px;
}
<div id="map-canvas"></div>
<div id="pageYOffset"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis./maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize" async defer></script>
Share
Improve this question
edited Aug 10, 2020 at 8:28
MrUpsidown
22.5k15 gold badges83 silver badges140 bronze badges
asked Aug 8, 2020 at 13:22
studio ahoistudio ahoi
914 bronze badges
6
- 1 this is not an programming error on my side - it is, unless you prove us otherwise by providing a minimal reproducible example. – MrUpsidown Commented Aug 8, 2020 at 14:54
- I guess i phrased that wrong. What i meant was: "To be sure i am not alone with this problem.". To make it reproducible, i added a simple code sample. – studio ahoi Commented Aug 9, 2020 at 17:38
- 1 I edited your question to include a stack snippet allowing to reproduce the issue and created a new issue in their tracker. You should star the issue if you want to receive updates about it. – MrUpsidown Commented Aug 10, 2020 at 8:26
- 1 @MrUpsidown Thank you for your help! I appreciate the effort. – studio ahoi Commented Aug 10, 2020 at 8:53
- 1 Just applied a temporary solution from duplicate of @MrUpsidown from Google Issue Tracker: issuetracker.google./issues/163170951 You can add the css property "overflow-anchor: none;" to your map container and this behavior might be prevented. – Marcelo Amorim Commented Aug 13, 2020 at 16:35
1 Answer
Reset to default 14add overflow-anchor:none to parent, here is
#map-canvas {
overflow-anchor:none;
}
本文标签:
版权声明:本文标题:javascript - Google Chrome 84 + Google Maps InfoWindow: Prevent webpage jump when clicking close button - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742204375a2432541.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论