3D Viewing in Angular Google Maps

Question

3D Viewing in Angular Google Maps

Navigation

#1 by (0 votes)

5

Preamble

I use Angular Google Maps to indicate the location of several buildings in campus of 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 as follows:

However,IrecentlyrealizedthatGoogleMapshas3Dinformationoftheareacovered,andIwouldlikethemaptoberenderedasfollows:

Question

Is it possible, via Google Maps, to configure the initialization of my map in order to display it in the way indicated?

Bonus question

... Would it be possible to rotate the "camera" programmatically by focusing on the position indicated in order to make the building turn?

Reference link for the indicated area: link

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

javascript angularjs google-maps angular-google-maps

asked by anonymous 20.07.2015 / 14:55

1 answer

Redirect with htaccess by holding the URL How to make visual studio 2015 publish only the files that are most current?

score 0 · Answer 1

I do not know how I could make google display in a 3D way, but to turn I was able to set up an example. Maybe what you can do is to change the tilt in the tilt property, to look 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>