add custom button in google map angular

Solutions on MaxInterview for add custom button in google map angular by the best coders in the world

showing results for - "add custom button in google map angular"
Diego Alejandro
24 Mar 2018
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