CODEWITHSUNDEEP
angularagm-map
Fatih Ersoy
Fatih Ersoy

Reputation: 739

agm-map control options not working properly

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.

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
  });
}

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

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.

Upvotes: 1

Views: 1607

Answers (1)

LENIN RAJ
LENIN RAJ

Reputation: 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
  });
}

Upvotes: 0

Related Questions