add button into google maps Angular2

Question

I am new in Angular and have a web app which displays a fullscreen google map. I want to add a "logout" button into the google map layout (not as header).

I know with javascript Google Maps Api, it is possible like :

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

But with the AGM - Angular Google Maps, I didn't find how.

Now I have that :

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

I found my solution, few days ago and it looks like your answer. I used the event (mapReady) which gives an instance of the native map.

There is also how I manage to display a search box into the map.

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

I had the same problem a few days ago. I'm not sure if this is the correct way. You could get the map by getNativeMap() in GoogleMapsAPIWrapper. And then assign it to an any type variable, otherwise, it cannot find controls:

view-more-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() {
    ...
  }

}

view-more-button.component.html

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