I have successfully implemented a Google Map with tilt and heading functionality, allowing the map to rotate horizontally. However, I am facing an issue where clicking on a marker resets the map back to its original position.
You can view the map by following this link: .
For the code related to this implementation, please refer 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 km (208 mi) " +
"south west of the nearest large town, Alice Springs; 450 km " +
"(280 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>