3D Visualization at Angular Google Maps

Asked

Viewed 157 times

5

Preamble

I use Angular Google Maps to indicate the location of several buildings in the campus from a university. My initialization is as follows:

 $scope.map = {
                    control: {},
                    center:
                    {
                        latitude: $scope.Item.Latitude,
                        longitude: $scope.Item.Longitude
                    },
                    zoom: 16,
                    options: {
                        streetViewControl: true,
                        maxZoom: 20,
                        minZoom: 8,
                        mapTypeId: google.maps.MapTypeId.HYBRID
                    },
                    showTraffic: true,
                    showBicycling: true,
                    events: {
                        blacklist: ['drag', 'dragend', 'dragstart', 'center_changed']
                    }
              };

This procedure is working, and allows visualization in the following way:

enter image description here

However, I recently realized that Google Maps has 3D information of the covered area, and I would like the map to be rendered as follows:

enter image description here

Question

It is possible, via Angular Google Maps, to configure the initialization of my map to display it in the indicated way?

Bonus question

...It would be possible to rotate the "camera" programmatically centering in the indicated position in order to make the building rotate?

Reference link to the given area: https://www.google.com/maps/@40.9570608,-76.8816097,179a,20y,180h,41.69t/data=! 3m1! 1e3

Disclaimer: This is a cross-post from the original OS, 3D map Visualization in Angular Google Maps

javascript angularjs google-maps angular-google-maps

  • Bring the answer from there to here.

  • Managed to Resolve?

1 answer

0

I don’t know how to make Google display in a 3D way, but spinning I was able to put together an example. Maybe what you can do is change the slope on the property tilt, to appear 3D, in this example the tilt is 45. 

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat:37.4274745 , lng: -122.1719077},
    zoom: 18,
    mapTypeId: google.maps.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);
  }
}
 html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
#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;
}
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Girando Imagem</title>
  </head>
  <body>
    <div id="floating-panel"><input type="button" value="Girar" onclick="autoRotate();"></div>
    <div id="map"></div>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA1DxXp2RnMhOirzR8NVtYNJf6p_yW_qo0&callback=initMap"></script>
  </body>
</html>

Browser other questions tagged javascript angularjs google-maps angular-google-maps

You are not signed in. Login or sign up in order to post.