Rotating 45° Imagery

  • This example demonstrates how to display a Google Map with a 45-degree tilted satellite view.

  • It includes a button that, when clicked, initiates automatic rotation of the map view.

  • The map is initialized with a specific center location, zoom level, and map type.

  • The rotation is achieved by periodically adjusting the map's heading property.

This example creates a map showing satellite imagery tilted at 45 degrees, along with a button that will rotate the map periodically.

TypeScript

let map: google.maps.Map; function initMap(): void {  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {  center: { lat: 40.76, lng: -73.983 },  zoom: 15,  mapTypeId: "satellite",  heading: 90,  tilt: 45,  });  // add listener to button  document.getElementById("rotate")!.addEventListener("click", autoRotate); } function rotate90(): void {  const heading = map.getHeading() || 0;  map.setHeading(heading + 90); } function autoRotate(): void {  // Determine if we're showing aerial imagery.  if (map.getTilt() !== 0) {  window.setInterval(rotate90, 3000);  } } declare global {  interface Window {  initMap: () => void;  } } window.initMap = initMap;
index.ts

JavaScript

let map; function initMap() {  map = new google.maps.Map(document.getElementById("map"), {  center: { lat: 40.76, lng: -73.983 },  zoom: 15,  mapTypeId: "satellite",  heading: 90,  tilt: 45,  });  // add listener to button  document.getElementById("rotate").addEventListener("click", autoRotate); } function rotate90() {  const heading = map.getHeading() || 0;  map.setHeading(heading + 90); } function autoRotate() {  // Determine if we're showing aerial imagery.  if (map.getTilt() !== 0) {  window.setInterval(rotate90, 3000);  } } window.initMap = initMap;
index.js

CSS

/*   * 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; } #floating-panel {  position: absolute;  top: 10px;  left: 25%;  z-index: 5;  background-color: #fff;  padding: 5px;  border: 1px solid #999;  text-align: center;  font-family: "Roboto", "sans-serif";  line-height: 30px;  padding-left: 10px; } 
style.css

HTML

<html> <head> <title>Rotating 45° Imagery</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="floating-panel"> <input type="button" value="Auto Rotate" id="rotate" /> </div> <div id="map"></div> <!-- The `defer` attribute causes the script to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
index.html

Try Sample

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application. 

 git clone -b sample-aerial-rotation https://github.com/googlemaps/js-samples.git  cd js-samples  npm i  npm start

Other samples can be tried by switching to any branch beginning with sample-SAMPLE_NAME. 

 git checkout sample-SAMPLE_NAME  npm i  npm start