How to set Google map to 2d with Angular2-Google-Maps

Question

I have installed Angular Google Maps with Angular 4.

The template is simple:

<agm-map [latitude]="58.150587" [longitude]="7.978571" [zoom]="19" [mapTypeId]="'satellite'"></agm-map>

What I get is a nice 3D-version, like this:

I want it to be satellite-view. But I don't want the 3D-effect. I want it to be flat, 2D, like this:

Answer 1

I used this module in one of my app and the map displayed is in 2d. the only difference with your code is the [mapTypeId] which I don't have :

<div class="map">
    <agm-map [latitude]="lat" [longitude]="lng" [zoom]="17">
        <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
    </agm-map>
</div>

There are 4 values possible for [maptypeId] attribute :

roadmap, which is what you want (and the one by default if the attribute is not provided)

satellite, which is a google earth representation

hybrid + terrain but I never used these.

---

In order to have the 2d representation, remove the attribute or change its value to [mapTypeId]="'roadmap'"

EDIT : leaving previous answer as it may help others, but the solution for your exact problem is bellow :

You need to add a mapReady event on your agm-map tag

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="17" [mapTypeId]="'hybrid'" (mapReady)="changeTilt($event)">

This event is fired when the google map is fully initialized. It will return your google.maps.Map instance as a result. You'll need to create a private property in order to store it.

private _map: any;

Then you can change the attributes and use the methods you want :

changeTilt(map) {
    this._map = map;
    this._map.setTilt(0);
}

I'd like to give a huge thanks to cholexa for being a really huge help on this solution (on angular2-google-map gitter chat)