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); } }
