0

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

Nimantha
  • 6,405
  • 6
  • 28
  • 69
Skvupp
  • 155
  • 2
  • 3
  • 12

1 Answers1

2

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)

nvkfr
  • 140
  • 1
  • 9
  • thank you, but I don't want the roadmap. I want it to be satelite, but in 2d. Like this. https://i.stack.imgur.com/Gkr3J.png – Skvupp Jun 14 '17 at 12:58
  • My bad for not understanding what you were looking to do. I found [this documentation](https://developers.google.com/maps/documentation/javascript/maptypes?hl=en#45DegreeImagery) that indicates that what you want is the setTilt method. I'm trying to figure how to use it with the module but with no result yet. Don't know if it's simply not supported or if there is a special synthax to use (with mapTypeControlOptions attribute for instance, you can see all attributes list [here](https://angular-maps.com/api-docs/agm-core/components/AgmMap.html)) – nvkfr Jun 14 '17 at 13:34
  • Don't have any answer yet,.. I see you posted on angular2-google-maps chat aswell, we'll see The best you can do for now is to limit the zoom level with [maxZoom] (since the tilt effect occurs only when a certain zoom is reached) until a better answer is found. – nvkfr Jun 14 '17 at 15:33
  • Thank you! You're a life saver! – Skvupp Jun 16 '17 at 08:13
  • You're welcome ! Please don't forget to set the answer so the issue is marked as solved. It will be easier for others to find this topic when needed :) – nvkfr Jun 16 '17 at 08:36