Is there a fix for scroll position change bug with Google Maps InfoWindows?

I implemented Google Maps on a site using the standard built-in InfoWindows functionality (https://developers.google.com/maps/documentation/javascript/infowindows). When an InfoWindow is closed by clicking on the “X” in the top right corner, the window.scrollY is changed by the height of the InfoWindow, as long as you aren’t at the very top (window.scrollY == 0). Here’s a jsfiddle I found while Googling the issue which, when modified a bit, shows the issue well.

$(function () {
    demoMap = {
        initMap: function () {
            var myLatlng = new google.maps.LatLng(41.097905, -73.405006);
            var myOptions = {
                zoom: 16,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            this.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            this.addMarker();
        },

        addMarker: function () {
            var self = this;
            var contentString = "<div id='content'>";
            contentString += "<div id='title'>Mr. Frosty's Deli and Grill</div>";
            contentString += "<div id='info'><p>10 1st Street</p><p>Norwalk, CT 06855</p><p>(203) 956-5767</p><p><a href='http://thebeachburger.com/'>thebeachburger.com‎</a></p></div></div>";

            var latlng = this.map.getCenter();

            var marker = new google.maps.Marker({
                position: latlng,
                map: this.map,
                title: "Mr. Frosty's Deli and Grill"
            });

            var infowindow = new google.maps.InfoWindow({
                content: contentString,
                disableAutoPan: true               
            });

            google.maps.event.addListener(marker, 'mouseover', function () {
                infowindow.setOptions({pixelOffset : self.getInfowindowOffset(self.map, marker)});
                infowindow.open(self.map, marker);
            });
            google.maps.event.addListener(marker, 'mouseout', function () {                
                infowindow.close();
            });
        },

        getInfowindowOffset: function (map, marker) {
            var center = this.getPixelFromLatLng(map.getCenter()),
                point = this.getPixelFromLatLng(marker.getPosition()),
                quadrant = "",
                offset;
            quadrant += (point.y > center.y) ? "b" : "t";
            quadrant += (point.x < center.x) ? "l" : "r";            
            if (quadrant == "tr") {
                offset = new google.maps.Size(-70, 185);
            } else if (quadrant == "tl") {
                offset = new google.maps.Size(70, 185);
            } else if (quadrant == "br") {
                offset = new google.maps.Size(-70, 20);
            } else if (quadrant == "bl") {
                offset = new google.maps.Size(70, 20);
            }

            return offset;
        },

        getPixelFromLatLng: function (latLng) {
            var projection = this.map.getProjection();          
            var point = projection.fromLatLngToPoint(latLng);
            return point;
        }
    }

    demoMap.initMap();
})();

http://jsfiddle.net/svigna/SJCNp/

If you add some height to the body (for example 2000px) and scroll a bit away from the top of the page, then click an InfoWindow closed, it will jump down the page by the exact height of the InfoWindow. I assume it has something to do with the fact that Google removes the elements entirely from the DOM when you close them, rather than simply using CSS classes to show/unshow the windows.

I scoured the internet for an answer, but it seems no one has noticed it, or no one cares, since it’s kind of a small issue. The only solution I could think of is countering the scrollY change with a window.scrollTo in the opposite direction by the height of the InfoWindow (I couldn’t get the actual InfoWindow element node to measure it’s current offsetHeight, so I had to force all InfoWindows to have a specific height to set that same height in my JS).

asked 23 hours ago
Greg GaedeGreg Gaede

Latest posts