javascript - Google Chrome 84 + Google Maps InfoWindow: Prevent webpage jump when clicking close button - Stack Overflow

admin管理员组

文章数量:1326320

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>

• javascript
• google-chrome
• google-maps
• google-maps-api-3

Share Improve this question Follow edited Aug 10, 2020 at 8:28 MrUpsidown 22.5k1515 gold badges8383 silver badges140140 bronze badges asked Aug 8, 2020 at 13:22 studio ahoistudio ahoi 9144 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

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 14

add overflow-anchor:none to parent, here is

#map-canvas {
  overflow-anchor:none;
}

本文标签：