Css-Zoomed Google Maps Wrong InfoWindow Position

Question

Google Maps doesn't support 19 or 20+ zoom in the area where I want to use it. I'm trying it to do with css. I'm creating the map, adding wheel event to recognize which zoom-level user in. If it's equal to 20, I'm adding css zoom property to the map. However, this time infowindow creating in wrong positions on my click.

   map = new google.maps.Map(document.getElementById("map"), {
            center: { lng: 1.393307, lat: 52.824281 },
            fullscreenControl: false,
            type: "HYBRID",
            minZoom: 8,
            maxZoom: 0,
            zoom: 5,
            gestureHandling: 'greedy',
            mapTypeId: 'hybrid',
            streetViewControl: false,
            controlSize: 27,
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.HYBRID, "Map"],
            },

        });

Wheel Event and the class' css

.zoom {
        zoom: 2;
    }
    
 window.addEventListener('wheel', function (event) {
            if (event.deltaY < 0) {
                if (map.getZoom() == 20) {
                    $('#map > div').eq(0).addClass("zoom");

                }
            }
            else if (event.deltaY > 0) {
                if (map.getZoom() <= 20) {
                    $('#map > div').eq(0).removeClass("zoom");

                }
            }
        });

Google Maps Click Event

google.maps.event.addListener(map, "click", (function (mapsMouseEvent) {

            var position = mapsMouseEvent.latLng;
                infowindow.setPosition(position);
            infowindow.setContent("test");
            infowindow.open(map);
        }));

Jsfiddle live test is here; https://jsfiddle.net/mylayf/ubeaL9s2/13

Answer 1

By doing this:

.zoom {
   zoom: 2;
}

You are changing the size of container. But zoom in map is done by loading a new layer data. By multiplying the size of container, the pictures will be bigger (along with buttons and etc.) but it's not loading a new layer. So the front window and container will have a shift. For example if you use a zoom of 2, the front window will be 1/4 of zoomed background image and if you click in middle, it will be exactly at the bottom right of background image.

So just change the maxZoom: 0 to something like maxZoom: 30 . It will load the maximum resolution images (equal to maxZoom: 18). If it's not enough for your, there are no more resolution by this map and you need to switch to another map provider with more layers for zoom.