feat(core): auto fitBounds

[sebholstein]

New API in favour of #868:

turn on auto fitbounds:

<agm-map [fitBounds]="true"></agm-map>

add the agmFitBoundsdirective to all elements you want to include in the bounds:

```html
<agm-map [fitBounds]="true">
  <agm-marker [agmFitBounds]="true"></agm-marker>
</agm-map>

[jimmykane]

He is back !

[delberthsoto]

Hi, im using AGM and i wonder if you can tell me how can i add this changes to the last version that i have installed 1.0.0-beta.2

[boogie77]

_boundsChangeDebounceTime$ is not needed, right?

[delberthsoto]

no only fitbounds, thank you!

[sebholstein]

@boogie77 it's not finished yet

[zegmonteiro]

Really wanting to use this feature!

[ed-jimmy]

+1

[appsetor]

how to use this?

[ed-jimmy]

@appsetor not available yet. To work with bounds go look at #719

when assigning "fitBounds" to the "agm-map" directive you need to pass it a value of type LatLngBounds. You can see the docs right here...

https://angular-maps.com/api-docs/agm-core/components/AgmMap.html#fitBounds

to create such value do what @tscislo did in #719. His answer is a little dated, so my code looks like this...

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

constructor(private mapsAPILoader: MapsAPILoader, private _deviceService: DeviceService) { }

ngOnInit(): void {

    let body = this.deviceListCommand.getPostRequest();//get all devices starting out

    this._deviceService.getDevices(body)
        .subscribe(
            (response: IDevice[]) => {
                this.markers = response;
                this.setBounds();
            },
            error => console.log(error)
        );
}

setBounds(): void {
    //wait until google map api loads
    this.mapsAPILoader.load().then(() => {
            this.latlngBounds = new window['google'].maps.LatLngBounds();
            this.markers.forEach((marker) => {
                this.latlngBounds.extend(new window['google'].maps.LatLng(marker.LastLatitude, marker.LastLongitude))
            })
    })
}

I make a call to get a list of objects, then for each I add to latlngBounds and on my template I have this

<agm-map [latitude]="lat" [longitude]="lng" [fitBounds]="latlngBounds" [zoom]="zoom">

            <agm-marker *ngFor="let m of markers"
                        [latitude]="m.LastLatitude" 
                        [longitude]="m.LastLongitude">

                <agm-info-window>
                    <strong>{{m.DeviceName}}</strong>
                </agm-info-window>

            </agm-marker>      

</agm-map>

[arkD]

this is by far the best answer i have seen @ed-jimmy, I was really struggling with this because of old examples. Thanks You!

[codecov]

Codecov Report

Merging #1389 into master will increase coverage by 0.59%.
The diff coverage is 36.36%.

@@            Coverage Diff             @@
##           master    #1389      +/-   ##
==========================================
+ Coverage   28.36%   28.95%   +0.59%     
==========================================
  Files          30       32       +2     
  Lines        1361     1454      +93     
  Branches      185      197      +12     
==========================================
+ Hits          386      421      +35     
- Misses        973     1031      +58     
  Partials        2        2

Impacted Files	Coverage Δ
packages/core/services/google-maps-types.ts	0% <ø> (ø)	⬆️
packages/core/core.module.ts	0% <0%> (ø)	⬆️
packages/core/directives/map.ts	0% <0%> (ø)	⬆️
packages/core/directives/fit-bounds.ts	0% <0%> (ø)
packages/core/services/fit-bounds.ts	100% <100%> (ø)
packages/core/directives/marker.ts	35.1% <44.44%> (+0.22%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 89b6e5c...27f9025. Read the comment docs.

[ed-jimmy]

@arkD I'm glad I could help! It looks like the commits @SebastianM made were a success. So let's wait and see when the changes are applied and we can use the new method, which is a lot better!

[sebholstein]

@ed-jimmy tests and docs are WIP right now. After that, it's ready

[DanPride]

When will this be merged ? Fantastic improvment. Thanks

[Dimmalice]

Any plans to release this? Because we want to use it.

[creatiolabsmx]

and how use the function [agmFitBounds]="true" in agm-circle