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

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

enter image description here

enter image description here

google-maps-api-33d


Solution 1:[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

Solution 2:[2]

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

Solution 3:[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/.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Maytha8
Solution 2 RoGuKa
Solution 3

Related Questions