add custom button in google map angular
<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>
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);
}
}