agm-map control options not working properly

Question

Even if I set the options for agm-maps, I see my options for a small amount of time, then they all disappear. I couldn't understand this behaviour. I created a simple project just to demonstrate the problem in Stackblitz, also I'm going to share my code here.

• code sample

maps.html:

<agm-map [latitude]="lat" [longitude]="lng"
(mapReady)="onMapReady($event)" 
>
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

maps.component.ts

  onMapReady(map: any) {
    this.map = map;
    this.map.setOptions({
      mapTypeControl: 'true',
      mapTypeControlOptions: {
        mapTypeIds: ['roadmap', 'hybrid'],
        position: google.maps.ControlPosition.TOP_LEFT,
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
      },
      fullscreenControl: true,
      streetViewControl: true
  });
}

• Stackblitz

https://stackblitz.com/edit/angular-agm-vvqbao?file=app/app.component.ts

• Reference

https://github.com/SebastianM/angular-google-maps/blob/f9c23aa5d166ac7408f13891f6bfa2fc16026b19/packages/core/services/google-maps-types.ts#L431-L444

---

You can see in Stackblitz, my map type controls blink just for a moment in the top left side of the map whenever the maps loads, then disappears for no reason. You probably won't realize in the first try, you can refresh the page while looking at top-left of the map.

Answer 1

#maps.component.ts#

onMapReady(map) {
  map.setOptions({
      mapTypeControl: 'true',
      mapTypeControlOptions: {
        mapTypeIds: ['roadmap', 'hybrid'],
        position: google.maps.ControlPosition.TOP_LEFT,
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
      },
      fullscreenControl: true,
      streetViewControl: true
  });
}