1<agm-map [latitude]="lat" [longitude]="lng" [zoom]=12 [mapTypeControl]="true" (boundsChange)="centerChanged($event)" (idle)="loadParkings()"
2 (mapReady)="mapReady($event)" (boundsChange)="boundsChanged($event)">
3 <button id="Settings" class="toggle-button controls button" [hidden]="hideSettings">
4 <mat-icon aria-hidden="true">settings</mat-icon>
5 </button>
6 <button id="Profile" class="toogle-button controls button" (click)="profileClicked()">
7 <mat-icon aria-hidden="true">account_circle</mat-icon>
8 </button>
9 <button id="Logout" class="toggle-button controls button" (click)="logout()">Logout</button>
10 <input id="Map-Search" class="controls" type="text" placeholder="Search Box">
11 <agm-marker *ngFor="let park of parkings" [latitude]="park.location[0]" [longitude]="park.location[1]"></agm-marker>
12</agm-map>
13
14
15declare const google: any;
16
17@Component({
18 selector: 'app-map',
19 templateUrl: './map.component.html',
20 styleUrls: ['./map.component.css'],
21})
22
23export class MapComponent {
24 map: any;
25 searchBox: any;
26
27 [...]
28
29 mapReady(event: any) {
30 this.map = event;
31 const input = document.getElementById('Map-Search');
32 this.searchBox = new google.maps.places.SearchBox(input);
33 this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById('Settings'));
34 this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById('Profile'));
35 this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
36 this.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById('Logout'));
37
38 this.searchBox.addListener('places_changed', () => this.goToSearchedPlace());
39 }
40
41 goToSearchedPlace() {
42 const places = this.searchBox.getPlaces();
43 if (places.length === 0) {
44 return;
45 }
46 const bounds = new google.maps.LatLngBounds();
47 places.forEach((place) => {
48 if (place.geometry.viewport) {
49 bounds.union(place.geometry.viewport);
50 } else {
51 bounds.extend(place.geometry.location);
52 }
53 });
54 this.map.fitBounds(bounds);
55 }
56}
57