Google Chrome 84 + Google Maps InfoWindow: Prevent webpage jump when clicking close button

user_4543179 0
Viewed 872

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.

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.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize" async defer></script>

google-maps-api-3 google-chrome google-maps javascript
1 Answers

add overflow-anchor:none to parent, here is

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