I'm trying to add the layering view from Google Maps in my application. The Application is running on Angular 14.1, I'm using DevExtreme and AGM (Angular Google Maps). I want to add the layering view, that is in the Google Maps with the idea to change the view from Satellite to Traffic for example and I want to look exactly in the same way like it's in Google Maps.
This is the HTML of the component.
<dx-popup
*ngIf="showMapPopUpVisible"
[(visible)]="showMapPopUpVisible"
[width]="800"
[height]="'auto'"
[maxHeight]="600"
[fullScreen]="appContext.isMobileMode"
[hideOnOutsideClick]="true"
[showCloseButton]="true"
[title]="resKeys.strOrderShowAddressesOnMap | translate"
>
<agm-map
[latitude]="latitude"
[longitude]="longitude"
[zoomControl]="true"
[mapTypeControlOptions]="mapTypeControlOptions"
[mapTypeControl]="true"
[zoom]="zoom"
[disableDefaultUI]="true"
class="map"
>
<agm-marker
*ngFor="let marker of markers"
[latitude]="marker.position.lat()"
[longitude]="marker.position.lng()"
>
<agm-info-window [disableAutoPan]="true">
<div class="marker-text-container">
<ng-container *ngFor="let item of marker.text; let i = index;">
{{ marker.title[0] }}
<br />
<span class="small">{{ item }}</span>
<hr *ngIf="i < marker.text.length - 1" class="marker-separator"/>
</ng-container>
</div>
</agm-info-window>
</agm-marker>
</agm-map>
</dx-popup>
And this is the mapTypeControlOptions in the Angular part.
public mapTypeControlOptions: MapTypeControlOptions = {
position: ControlPosition.LEFT_BOTTOM,
style: 2,
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain'],
};
But this is the Layers view that I'm getting
Any help is appreciated, thanks in advance to all of you!