Search code examples
angulargoogle-mapsangular2-google-maps

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

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:

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:

Like this

Solution

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