ajouter le bouton dans google maps Angular2

Question

Je suis nouveau dans Angular et ai une application de Web qui affiche une carte de google de plein écran. Je souhaite ajouter un bouton "Déconnexion" dans la mise en page Google Maps (pas en tant qu'en-tête).

Je sais avec javascript Google Maps Api, il est possible, comme:

var Logout = document.getElementById('Logout'); 
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(Logout); 

Mais avec le AGM - Angular Google Maps, je ne trouve pas comment.

Maintenant, j'ai que:

map.component.html

<button id="Logout" [(ngModel)]="logoutButton" class="toggle-button controls button" (click)="logout()">Logout</button> 

<agm-map [latitude]="lat" [longitude]="lng" [zoom]=12 [mapTypeControl]="true" (boundsChange)="centerChanged($event)" (idle)="loadParkings()" > 

    <agm-marker *ngFor="let park of parkings" [latitude]="park.location[0]" [longitude]="park.location[1]"></agm-marker> 
</agm-map> 

map.component.ts

import {GoogleMapsAPIWrapper} from '@agm/core'; 

declare var google: any; 

@Component({ 
    selector: 'app-map', 
    templateUrl: './map.component.html', 
    styleUrls: ['./map.component.css'] 
}) 

export class MapComponent implements OnInit { 
    lat: number; 
    lng: number; 
    map: any; 
    logoutButton: any; 

    constructor(
    public mapApi: GoogleMapsAPIWrapper) {} 

    ngOnInit(): void { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(position => { 
     this.lat = position.coords.latitude; 
     this.lng = position.coords.longitude; 
     }); 
    } else { 
     this.lat = 47.2275654; 
     this.lng = -1.3849729; 
    } 
    } 


    logout() { 
    this.authenficationService.logout(); 
    this.router.navigate(['/login']); 
    } 
} 

Answer 1

J'ai trouvé ma solution, il y a quelques jours et ça ressemble à votre réponse. J'ai utilisé l'événement (mapReady) qui donne une instance de la carte native.

Il ya aussi comment je parviens à afficher un champ de recherche dans la carte.

map.component.html

<agm-map [latitude]="lat" [longitude]="lng" [zoom]=12 [mapTypeControl]="true" (boundsChange)="centerChanged($event)" (idle)="loadParkings()" 
    (mapReady)="mapReady($event)" (boundsChange)="boundsChanged($event)"> 
    <button id="Settings" class="toggle-button controls button" [hidden]="hideSettings"> 
     <mat-icon aria-hidden="true">settings</mat-icon> 
    </button> 
    <button id="Profile" class="toogle-button controls button" (click)="profileClicked()"> 
     <mat-icon aria-hidden="true">account_circle</mat-icon> 
    </button> 
    <button id="Logout" class="toggle-button controls button" (click)="logout()">Logout</button> 
    <input id="Map-Search" class="controls" type="text" placeholder="Search Box"> 
    <agm-marker *ngFor="let park of parkings" [latitude]="park.location[0]" [longitude]="park.location[1]"></agm-marker> 
</agm-map> 

map.component.ts

declare const google: any; 

@Component({ 
    selector: 'app-map', 
    templateUrl: './map.component.html', 
    styleUrls: ['./map.component.css'], 
}) 

export class MapComponent { 
    map: any; 
    searchBox: any; 

    [...] 

    mapReady(event: any) { 
     this.map = event; 
     const input = document.getElementById('Map-Search'); 
     this.searchBox = new google.maps.places.SearchBox(input); 
     this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById('Settings')); 
     this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById('Profile')); 
     this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
     this.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById('Logout')); 

     this.searchBox.addListener('places_changed',() => this.goToSearchedPlace()); 
    } 

    goToSearchedPlace() { 
     const places = this.searchBox.getPlaces(); 
     if (places.length === 0) { 
     return; 
     } 
     const bounds = new google.maps.LatLngBounds(); 
     places.forEach((place) => { 
     if (place.geometry.viewport) { 
      bounds.union(place.geometry.viewport); 
     } else { 
      bounds.extend(place.geometry.location); 
     } 
     }); 
     this.map.fitBounds(bounds); 
    } 
} 

Answer 2

J'ai eu le même problème il y a quelques jours . Je ne suis pas sûr que ce soit la bonne façon. Vous pouvez obtenir la carte par getNativeMap() dans GoogleMapsAPIWrapper. Et puis l'affecter à une toute variable de type, sinon, il ne peut pas trouver des contrôles:

vue-plus-button.component.ts

import { Component, OnInit } from '@angular/core'; 
import { GoogleMapsAPIWrapper } from '@agm/core/services/google-maps-api-wrapper'; 
declare var google: any; 

@Component({ 
    selector: 'app-view-more-button', 
    templateUrl: './view-more-button.component.html', 
    styleUrls: ['./view-more-button.component.css'] 
}) 
export class ViewMoreButtonComponent implements OnInit { 

    private _isMoreMap: boolean; 

    constructor(private _wrapper: GoogleMapsAPIWrapper) { 
    this._isMoreMap = true; 
    } 

    ngOnInit() { 
    this._wrapper.getNativeMap().then((m) => { 
     // m type doesnt have controls declared. So need to store it to <any> first then use controls 
     var nativeMap: any; 
     nativeMap = m; 
     nativeMap.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById("view-more-button")); 
    }); 
    } 

    private _click() { 
    ... 
    } 

} 

vue-plus-button.component.html

<button class="btn btn-primary" (click)="_click()" id="view-more-button"> 
    View More Map 
</button>