1<agm-map [zoom]="13"  [latitude]="127.1" [longitude]="141.1">
2                <agm-marker [latitude]="127.1" [longitude]="141.1"></agm-marker>
3</agm-map>

1import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
2import { MyMarker } from './marker';
3import { MarkersService } from './markers.service';
4import { GoogleMapsAPIWrapper, AgmMap, LatLngBounds, LatLngBoundsLiteral} from '@agm/core';
5
6declare var google: any;
7
8@Component({
9  selector: 'app-root',
10  templateUrl: './app.component.html',
11  styleUrls: ['./app.component.css']
12})
13export class AppComponent implements OnInit, AfterViewInit {
14
15  title = 'AGM project (so48865595)';
16  lat = 41.399115;
17  lng = 2.160962;
18  markers: MyMarker[];
19
20  @ViewChild('AgmMap') agmMap: AgmMap;
21
22  constructor(private markersService: MarkersService) { }
23
24  ngOnInit() {
25    this.getMarkers();
26  }
27
28  ngAfterViewInit() {
29    console.log(this.agmMap);
30    this.agmMap.mapReady.subscribe(map => {
31      const bounds: LatLngBounds = new google.maps.LatLngBounds();
32      for (const mm of this.markers) {
33        bounds.extend(new google.maps.LatLng(mm.lat, mm.lng));
34      }
35      map.fitBounds(bounds);
36    });
37  }
38
39  getMarkers(): void {
40    this.markers = this.markersService.getMarkers();
41  }
42
43  mapIdle() {
44    console.log('idle');
45  }
46}
47