Google map rotation resetting back to normal, once I click map info window open [closed]

Question

I created google map with tilt and heading i.e., google map should rotate horizontally. That one I completed but once click marker it resetting back original position.

please find link https://dataclick.in/map.html.

And for code see below

function initMap() {
      var mapStyles = [{ elementType: 'geometry', stylers: [{ color: '#242f3e' }]}];
        var mapOptions = {
            center: { lat: 25.21843200364252, lng: 55.25060464619004 },
            zoom: 12,
            heading: 310,
            tilt: 0,
            mapId: "59a152d4427fb0ab",
            styles: mapStyles,
            rotateControl:true,
        };
        var map = new google.maps.Map(document.getElementById('map'), mapOptions );
        const contentString =
            '<div id="content">' +
            '<div id="siteNotice">' +
            "</div>" +
            '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
            '<div id="bodyContent">' +
            "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
            "sandstone rock formation in the southern part of the " +
            "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
            "south west of the nearest large town, Alice Springs; 450&#160;km " +
            "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
            "features of the Uluru - Kata Tjuta National Park. Uluru is " +
            "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
            "Aboriginal people of the area. It has many springs, waterholes, " +
            "rock caves and ancient paintings. Uluru is listed as a World " +
            "Heritage Site.</p>" +
            '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
            "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
            "(last visited June 22, 2009).</p>" +
            "</div>" +
            "</div>";
          const infowindow = new google.maps.InfoWindow({
            content: contentString,
          });
        const marker = new google.maps.Marker({
            position: { lat: 25.21843200364252, lng: 55.25060464619004 },
            map,
            title: "Hello World!",
        });
        marker.addListener("click", () => {
            infowindow.open({
              anchor: marker,
              map,
              shouldFocus: false,
            });
        });
    }

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=beta"
  async
></script>

Answer 1

Looks like the InfoWindow autopan functionality is modifying the map's rotation. If the disableAutoPan InfoWindowOption is set to true, it no longer rotates.

disableAutoPan optional
Type: boolean optional
Disable auto-pan on open. By default, the InfoWindow will pan the map so that it is fully visible when it opens.

(that seems to not be expected, might be a bug)

code snippet:

function initMap() {
      var mapStyles = [{ elementType: 'geometry', stylers: [{ color: '#242f3e' }]}];
        var mapOptions = {
            center: { lat: 25.21843200364252, lng: 55.25060464619004 },
            zoom: 12,
            heading: 310,
            tilt: 0,
            mapId: "59a152d4427fb0ab",
            styles: mapStyles,
            rotateControl:true,
        };
        var map = new google.maps.Map(document.getElementById('map'), mapOptions );
        const contentString =
            '<div id="content">' +
            '<div id="siteNotice">' +
            "</div>" +
            '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
            '<div id="bodyContent">' +
            "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
            "sandstone rock formation in the southern part of the " +
            "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
            "south west of the nearest large town, Alice Springs; 450&#160;km " +
            "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
            "features of the Uluru - Kata Tjuta National Park. Uluru is " +
            "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
            "Aboriginal people of the area. It has many springs, waterholes, " +
            "rock caves and ancient paintings. Uluru is listed as a World " +
            "Heritage Site.</p>" +
            '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
            "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
            "(last visited June 22, 2009).</p>" +
            "</div>" +
            "</div>";
          const infowindow = new google.maps.InfoWindow({
            content: contentString,
            disableAutoPan: true
          });
        const marker = new google.maps.Marker({
            position: { lat: 25.21843200364252, lng: 55.25060464619004 },
            map,
            title: "Hello World!",
        });
        marker.addListener("click", () => {
            infowindow.open({
              anchor: marker,
              map,
              shouldFocus: false,
            });
        });
    }

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=beta"
  async
></script>