how to auto set infowindow content in google map

Question

1. When marker is top then if I click then marker position set a map center but I don't want to change map position from top

2. When I click from bottom like that I will go to top position automatically see this image : actual but I want to scroll top automtically on top position like this expected

3. Left and right working fine based on auto position

note : infowindow content show from bottom not from top

see my js fiddle

function initMap() {

        var mapProp = {
            center: new google.maps.LatLng(52.922592, -1.474605),//set the centre of the map. In my case it is the same as the position of the map pin.
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map"), mapProp);

        var html = '<li class="list-group-item">' +
            '<a id="exampleMenu1">' +
            '<div class="context">Example 1</div>' +
            '</a>' +
            '</li>' +
            '<li class="list-group-item">' +
            '<a id="exampleMenu2">' +
            '<div class="example">Example 2</div>' +
            '</a>' +
            '</li>' +
            '<li class="list-group-item">' +
            '<a id="exampleMenu3">' +
            '<div class="example">Example 3</div>' +
            '</a>' +
            '</li>' +
            '<li class="list-group-item">' +
            '<a id="exampleMenu4">' +
            '<div class="example">Example 4</div>' +
            '</a>' +
            '</li>' +
            '<li class="list-group-item">' +
            '<a id="exampleMenu5">' +
            '<div class="example">Example 5</div>' +
            '</a>' +
            '</li>';


        var infowindow = new google.maps.InfoWindow({
            content: html
        });


        //Create a marker pin to add to the map
        var marker;
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(52.922592, -1.474605),//set the position of the pin
            map: map,
            //title: "Derby",
            icon: "http://www.codeshare.co.uk/images/blue-pin.png", //if you comment this out or delete it you will get the default pin icon.
            animation: google.maps.Animation.DROP
        });

        marker.addListener('click', function () {
            infowindow.open(map, marker);
        });
    }
    
  //  google.maps.event.addDomListener(window, 'load', initMap);

#map {
            width: 100%;
            height: calc(100vh);
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .gm-style .gm-style-iw-c {
            position: absolute;
            box-sizing: border-box;
            overflow: hidden;
            top: 200px;
            left: 58px;
            transform: translate(-50%,-100%);
            background-color: white;
            border-radius: 8px;
            padding: 12px;
            box-shadow: 0 2px 7px 1px rgba(0,0,0,0.3);
        }
        .gm-style .gm-style-iw-t::after {
           display: none;
        }

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Answer 1

So what you want to do is center the map to the infowindow when the marker is clicked, right? In that case, you can modify your click event listener as follows:

    marker.addListener('click', function () {
        infowindow.open(map, marker);
        map.setCenter(infowindow.getPosition());
    });

Hope this helps!