Insert Google Maps Layer View with AGM in Angular Application

245 views Asked by At

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. Google Maps Layers View

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

Layers View

Any help is appreciated, thanks in advance to all of you!

0

There are 0 answers