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 Long

Answer 1

I got it to work with the LatLngBounds() function. Here is the snippet.

import {AgmInfoWindow, MapsAPILoader} from '@agm/core';

latlngBounds: any;

// fits the map to the bounds
    if (this.points.length.) {
      this.mapsAPILoader.load().then(() => {
          this.latlngBounds = new window['google'].maps.LatLngBounds();
          _.each(this.points, location => {
            this.latlngBounds.extend(new window['google'].maps.LatLng(location.lat, location.lng));
          });
        }
      );
    }

Answer 2

@renil-babu

Instead of doing the fitBounds on mapReady, you have to do it in your adding markers subscription block

      const bounds: LatLngBounds = new google.maps.LatLngBounds();
      for (const mm of this.markers) {
        bounds.extend(new google.maps.LatLng(mm.lat, mm.lng));
      }
      // @ts-ignore
      this.agmMap._mapsWrapper.fitBounds(bounds);

Answer 3

Since September 2018 there is the AgmFitBounds directive. Super easy.

<agm-map
  style="width:100vw; height:100vh;"
  [fitBounds]="true">

  <agm-marker
    *ngFor="let location of locations"
    [latitude]="location.latitude"
    [longitude]="location.longitude"
    [agmFitBounds]="true"></agm-marker>
</agm-map>

Answer 4

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!