How do I enable 3D Satellite view in Google Maps JavaScript API?

Question

How do I enable 3D satellite view in Google Maps JavaScript API, please? Let me repeat! 3D! Please do NOT refer me to the 45-degree angle view, that is NOT 3D!

You can get this on Google Maps by clicking the Satellite view and click the 3D icon below the compass in the lower right corner (in red square).

Answer 1

Unfortunately, you cannot make the Google Maps JavaScript API have a 3D option. An alternative is to use the setTilt(number) function as explained in the Google Maps Documentation - Map Types.

Enabling and Disabling 45° Imagery

You can disable 45° imagery by calling setTilt(0) on the Map object. To enable 45° imagery for supported map types, call setTilt(45). You can also use a number other than 45 degress if you wanted to.

⭑ The Map's getTilt() method will always reflect the current tilt being shown on the map; if you set a tilt on a map and then later remove that tilt (by zooming the map out, for example), the map's getTilt() method will return 0.

The following example displays a 45° view of downtown Portland, OR:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 36.964, lng: -122.015},
    zoom: 18,
    mapTypeId: 'satellite'
  });
  map.setTilt(45);
}

View Example

Rotating 45° Imagery

The 45° imagery actually consists of a collection of images for each cardinal direction (North, South, East, West). Once your map is displaying 45° imagery, you can orient the imagery towards one of its cardinal directions by calling setHeading() on the Map object, passing a number value expressed as degrees from North.

The following example shows an aerial map and auto-rotates the map every 3 seconds when the button is clicked:

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 45.518, lng: -122.672},
    zoom: 18,
    mapTypeId: 'satellite',
    heading: 90,
    tilt: 45
  });
}

function rotate90() {
  var 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);
  }
}

View Example