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!

Answer 2

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 3

@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 4

Objectives As we know AGM map allows fitbound to the marker, not the zone. Based on the accepted answer above I tried using this.agmMap.mapReady.subscribe But in the latest version we don't have the subscribe or the fitbound function in the AgmMap object.

Sollution I found an easy way to make fitbound available to the zone by adding markers to the zone borders. i.e, We know a zone is a combination of coordinates so take the first and 3 middle coordinates of any zone and add them as hidden markers, That's all !!.

Check the below code snippet on how I did. It's a working tested code.

Code snippet

<agm-map [zoom]="map_zoom" [fitBounds]="fit_bound" [disableDoubleClickZoom]="true" [latitude]="latitude" [longitude]="longitude">

  <span *ngFor="let mapData of list_map_geojsons">
     <agm-marker [iconUrl]="marker_icon" [latitude]="mapData.lat" [longitude]="mapData.lng" [agmFitBounds]="true"></agm-marker>
     <agm-data-layer  [geoJson]="mapData.geojson" [style]="mapData.colors"></agm-data-layer>
     <!--this is our magic code to make fitbound for zones -->
     <span *ngFor="let geoMarkers of mapData.geo_makrkers">
        <agm-marker [visible]="false" [latitude]="geoMarkers[1]" [longitude]="geoMarkers[0]" [agmFitBounds]="true"></agm-marker>
     </span>
     <!--magic code ends-->
  </span>


</agm-map>

import { AgmMap} from '@agm/core';

// My geojson
const parsed_json = JSON.parse(result.geojson);

/* ----------- This  code is wriitern for making fitbound to the zone,
 Keeping in mind that first and last co ordinates are same Here we take 
start mid, mid2 and mid3 of the zone coordinates and put it in the map 
as hidden markers so that fitbound will be available for the zone ------ */

let len = parsed_json.features[0].geometry.coordinates[0].length - 1;
let mid = Math.round(len / 2);
let mid2 = Math.round(mid / 2);
let mid3 = mid + mid2;
let geo_makrkers = [
  parsed_json.features[0].geometry.coordinates[0][0],
  parsed_json.features[0].geometry.coordinates[0][mid],
  parsed_json.features[0].geometry.coordinates[0][mid2],
  parsed_json.features[0].geometry.coordinates[0][mid3]
]
/* ---- End of zone fitbound -----*/

const map_data = {
  geojson: parsed_json,
  lat: latitude,
  lng: longitude,
  colors: map_colors,
  geo_makrkers: geo_makrkers
};

Answer 5

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 6

If you don't use agm-marker for some reason (you use html markers, as me) Then it is possible that your component is not supporting agmFitBounds accessor. In order to make it work write your custom component which implements FitBoundsAccessor:

import { ChangeDetectionStrategy, Component, forwardRef, Input, OnChanges, SimpleChanges } from '@angular/core';
import { FitBoundsAccessor, FitBoundsDetails } from '@agm/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Component({
    selector: 'guide-map-bounds',
    template: `<ng-content></ng-content>`,
    providers: [{ provide: FitBoundsAccessor, useExisting: forwardRef(() => MapBoundsComponent) }],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MapBoundsComponent implements FitBoundsAccessor, OnChanges {
    @Input() latitude: number;
    @Input() longitude: number;

    private fitBoundsDetails$ = new BehaviorSubject<FitBoundsDetails>(null);

    constructor() { }

    ngOnChanges(changes: SimpleChanges): void {
        const latLng: google.maps.LatLngLiteral = { lat: this.latitude, lng: this.longitude };

        this.fitBoundsDetails$.next({ latLng });
    }

    getFitBoundsDetails$(): Observable<FitBoundsDetails> {
        return this.fitBoundsDetails$.asObservable();
    }
}

Then in your html, inside agm-map

<guide-map-bounds [agmFitBounds]="true" *ngFor="let marker of markers" [latitude]="marker.lat" [longitude]="marker.lon">
  <agm-html-overlay [latitude]="marker.lat" [longitude]="marker.lon">
    <div class="marker" >
      
    </div>
  </agm-html-overlay>
</guide-map-bounds>

Please notice agm-html-overlay is custom component that doesn't support agmFitBounds

Answer 7

    <agm-map #agmap   
      [zoom]="zoom"
      [disableDefaultUI]="false"
      [zoomControl]="false"
      [fitBounds]="true">
        <agm-marker [agmFitBounds]="true" [latitude]="curretAddLat" [longitude]="curretAddLng"></agm-marker>
      </agm-map>
***Above code will help you with AGM MAP.