OnoSendai
OnoSendai

Reputation: 3970

3D map visualization in Angular Google Maps

Preamble

I'm using Angular Google Maps to indicate the location of different buildings across a campus. My initilization goes 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']
                    }
              };

That works flawlessly for the following visualization:

enter image description here

However, I just noticed that there is 3D data available for the region, and I would like to have it renderized as such:

enter image description here

Question

Is it possible, via Angular Google Maps, to configure my initialization in such a way as to show the map as indicated?

Bonus Question

...would it be possible to programatically have the 'camera' spin around the marker (or the center)?


This is the Map link for the reference images: https://www.google.com/maps/@40.9570608,-76.8816097,179a,20y,180h,41.69t/data=!3m1!1e3

Upvotes: 0

Views: 2841

Answers (1)

kaho
kaho

Reputation: 4784

The best you can get with the Google Maps Javascript API is the 45° imagery.

Not like the 3D map visualization, 45° imagery only has:
1) the 45° tile...
2) 4 angels (0, 90, 180, 270)
3) only has SATELLITE mode. (Road names and other maps elements isn't shown even the maps is in HYBRID)
4) it is not available everywhere over the globe. (for example, 40.9570608,-76.8816097)

Look at this example for more information.
http://jsfiddle.net/u1qcf892/

Upvotes: 1

Related Questions