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).

Brunson

The gif image in your post is a 45 degree imagery of a google map location, right? – Malaysia

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

Hetrick

Answer 2

Unfortunately, as of now, the feature hasn't been implemented into Google Map JavaScript API yet.

Acidulent

Answer 3

As RoGuKa said there currently is no feature to achieve this in the Google Maps Javascript API. In the past there was the Google Earth API but this has been deprecated due to security flaws in the frameworks it used and won't run on any modern browsers.

A option may be to use some other 3d mapping solution such as https://cesium.com/platform/cesiumjs/.

Metal

Answer 4

Finally, there is a new Photorealistic 3D Maps JavaScript API that has been released!

Orthorhombic

Answer 5

You can also use the JS Arcgis API and the 3D tiles available from Google, see this post for details

Grundy