title: AGM Map: set the zoom level to include all markers
body: <p>To set the map zoom level to include all the location markers, I have tried two options as suggested in <a href="https://stackoverflow.com/questions/48865595/is-there-a-way-to-set-the-bounds-and-zoom-level-in-agm-map">this post</a>.</p>
  <p>Here's what I did:</p>
  <pre><code>export class LocationSelectionComponent implements OnInit, AfterViewInit {
  
  @ViewChild('AgmMap') agmMap: AgmMap;
  
  ngAfterViewInit() {
    console.log(this.agmMap);
    this.agmMap.mapReady.subscribe(map =&gt; {
    const bounds: LatLngBounds = new window['google'].maps.LatLngBounds();
    for (const mm of this.mapMarkers) {
      if (mm.latitude !== this.currentLocationLatitude &amp;&amp; mm.longitude !== this.currentLocationLongitude) {
        bounds.extend(new window['google'].maps.LatLng(mm.latitude, mm.longitude));
       }
     }
  
     map.fitBounds(bounds);
    });
   }
  }
  </code></pre>
  <p>Note that this.mapMarkers is an array which contains the coordinates for the map markers. These are populated in <code>ngOnInit()</code>.</p>
  <p>As mentioned in the comment of the above post, I've also tried the following:</p>
  <pre><code>onMapReady(map: AgmMap) {
   const bounds: LatLngBounds = new window['google'].maps.LatLngBounds();
   for (const mm of this.mapMarkers) {
     if (mm.latitude !== this.currentLocationLatitude &amp;&amp; mm.longitude !== this.currentLocationLongitude) {
       bounds.extend(new window['google'].maps.LatLng(mm.latitude, mm.longitude));
     }
   }
  
   // @ts-ignore
    map.fitBounds(bounds);
  }
  </code></pre>
  <p>then in HTML:</p>
  <pre><code>  &lt;agm-map #AgmMap [latitude]=&quot;latitude&quot; [longitude]=&quot;longitude&quot;
                     [fullscreenControl]=&quot;true&quot; [mapTypeControl]=&quot;true&quot; (mapReady)=&quot;onMapReady($event)&quot;&gt;
              &lt;agm-marker *ngFor=&quot;let m of mapMarkers; let i = index&quot;
                          [latitude]=&quot;m.latitude&quot;
                          [longitude]=&quot;m.longitude&quot;
                          [title]=&quot;m.title&quot;
                          [iconUrl]=&quot;m.iconUrl&quot;
                          [animation]=&quot;m.animation&quot;
                          (markerClick)=&quot;clickedMarker(m.label)&quot;&gt;
              &lt;/agm-marker&gt;
            &lt;/agm-map&gt;
  </code></pre>
  <p>But in both instances, I don't get the map zoomed out as I expect. The reason is, when I debug the code, the mapMarkers array is empty in both instances. How do I fix this?</p>