Is there a way to set the bounds and Zoom level in AGM Map?

Question

I am using AGM maps for my angular 4 application, there I am facing issues, I will be having the multiple markers which are fetched from api as an array of Latitude and Longitude. I want to set the zoom level exactly covering all the markers on the map. Even if one marker in one country and other in some other country also, It should set the zoom level on load to show all the markers on the map. Is there a way to do that in AGM angular maps? Could anyone please help me

Answer 1

Objectives

We would like to set a zoom level of AGM map to show all the markers on the map. Typically in Google Maps JavaScript API you use the fitBounds() method of the google.maps.Map class to achieve this.

https://developers.google.com/maps/documentation/javascript/reference/3/map

So, we have to get instance of the map object (the JavaScript API instance) and apply fitBounds() on it.

Solution

I have created a simple example that has a mock service that provides JSON data for 5 markers and draws map and markers using AGM map. In this example I used @ViewChild decorator to get the instance of AGM map and listen the mapReady event to get instance of map object (from JavaScript API). Once I get map instance I can easily create LatLngBounds object and call fitBounds() on map object. Have a look at the ngAfterViewInit() method in the app.component.ts to get an idea.

Code snippet

app.component.ts

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { MyMarker } from './marker';
import { MarkersService } from './markers.service';
import { GoogleMapsAPIWrapper, AgmMap, LatLngBounds, LatLngBoundsLiteral} from '@agm/core';

declare var google: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {

  title = 'AGM project (so48865595)';
  lat = 41.399115;
  lng = 2.160962;
  markers: MyMarker[];

  @ViewChild('AgmMap') agmMap: AgmMap;

  constructor(private markersService: MarkersService) { }

  ngOnInit() {
    this.getMarkers();
  }

  ngAfterViewInit() {
    console.log(this.agmMap);
    this.agmMap.mapReady.subscribe(map => {
      const bounds: LatLngBounds = new google.maps.LatLngBounds();
      for (const mm of this.markers) {
        bounds.extend(new google.maps.LatLng(mm.lat, mm.lng));
      }
      map.fitBounds(bounds);
    });
  }

  getMarkers(): void {
    this.markers = this.markersService.getMarkers();
  }

  mapIdle() {
    console.log('idle');
  }
}

app.component.html

<h1>{{ title }}</h1>

<!-- this creates a google map on the page with the given lat/lng from -->
<!-- the component as the initial center of the map: -->
<agm-map #AgmMap [latitude]="lat" [longitude]="lng" (idle)="mapIdle()">
  <agm-marker *ngFor="let p of markers" [latitude]="p.lat" [longitude]="p.lng"></agm-marker>
</agm-map>

Conclusion

If you would like to check complete example please download the sample project:

https://github.com/xomena-so/so48865595

I hope this helps!