如何在谷歌地图中自动设置信息窗口内容

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!