Angular-google-maps: FitBounds using

I would like to know how to generate bounds from my markers to use this fitbound function as well. I could not for the life of me figure out how to create a LatLng object to pass into bound.extends function so I can use angular 2 binding and map the fitBounds property of sebm-google-map-marker to my bounds variable.
@suleymanozev -- I know how to use fitbounds as long as I can generate a LatLng object. Do you want to work together?

My temporary work around is to loop through my device data and just manually calculating my center point using the average between west,east, north, and south since I can't get fit to work. Obviously using this method you would get the center correct but the zoom level wouldn't be right.

west = devicedata[0].Long;
east = devicedata[0].Long;
north = devicedata[0].Lat;
south = devicedata[0].Lat;
for(let dev of this.devicedata) {
if(west > dev.Long){
west = dev.Long
}
if(east < dev.Long){
east = dev.Long
}
if( north < dev.Lat){
north = dev.Lat
}
if( south > dev.Lat){
south = dev.Lat
}
}
this.center.lat = (north + south)/2;
this.center.lng = (east + west)/2;

Update
I decided to use the LatLngBoundsLiteral and mapped my calculated east,west,north,south directly to it and it seems to be working.

var offset = 0.25;
this.boundsl = <LatLngBoundsLiteral>{west: west - offset, north: north + offset, south: south - offset, east: east + offset};

Then HTML code
<sebm-google-map #mygmap [latitude]="center.lat" [longitude]="center.lng" usePanning="true" [fitBounds]="boundsl">

You can generate LatLngBounds with this function:

import { MapsAPILoader } from 'angular2-google-maps/core';
constructor(private mapsAPILoader:MapsAPILoader) {}
this.mapsAPILoader.load().then(() => {let latlngbounds = new google.maps.LatLngBounds();})

Important part is that MapsApiLoader from angular2-google-maps, because you can't use google.maps object before this event has been fired.

Guys, I saw this commit from @SebastianM. https://github.com/SebastianM/angular2-google-maps/commit/d625ab6796768d167d7a0f9f2b9a504fce8a2bea
Seem he has already removed the fitbounds attribute. Should we use latitude and longitude instead ?

I ended up with generating the bounds as I use on AngularJS and then calculate the center lat and long based on the bounds. There are still some more things to handle e.g zoom level.

Might it be helpful for you guys.

generateBounds(markers): any {
        if (markers && markers.length > 0) {
            var bounds = new google.maps.LatLngBounds();

            markers.forEach((marker: any) => {
                bounds.extend(new google.maps.LatLng({ lat: marker.latitude, lng: marker.longitude }));
            });

            //check if there is only one marker
            if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
                var extendPoint = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
                bounds.extend(extendPoint);
            }

            return {
                northeast: {
                    latitude: bounds.getNorthEast().lat(),
                    longitude: bounds.getNorthEast().lng()
                },
                southwest: {
                    latitude: bounds.getSouthWest().lat(),
                    longitude: bounds.getSouthWest().lng()
                }
            }
        }
        //return empty object when no bundle selected
        return {};
    }

this.bounds = this.generateBounds(this.bundleMarkers)
this.lat = (this.bounds.northeast.latitude + this.bounds.southwest.latitude) / 2;
this.lng = (this.bounds.northeast.longitude + this.bounds.southwest.longitude) / 2;

<sebm-google-map [latitude]="lat" [longitude]="lng">        
    <sebm-google-map-marker 
        *ngFor="let marker of bundleMarkers"
        [latitude]="marker.latitude"
        [longitude]="marker.longitude"
        [label]="marker.label"
        [title]="marker.title">
    </sebm-google-map-marker>
</sebm-google-map>

Hello, I started using this lib and it's amazing. I've been looking to center my map based on the markers and I don't understand why this is made so difficult ...
I declared my markers and wrote a simple method that will center the map based on the markers:

getCenterMarkers(): void{

    let lat: number = 0;
    let lng: number = 0;

    this.markers.forEach(marker => {
        lat += marker.lat;
        lng += marker.lng;
    });

    this.center.lat = lat/this.markers.length;
    this.center.lng = lng/this.markers.length;
}

@VinceEeckhout I don't understand why this is made so difficult ...

Because getting the center is ok, but what about 'zoom' level. This is where LatBounds comes in to place and I still have to find a proper way of implementing this.

import {MapsAPILoader} from 'angular2-google-maps/core';

 constructor(private mapsAPILoader: MapsAPILoader) {
        this.mapsAPILoader.load().then(() => {
                **this.latlngBounds = new window['google'].maps.LatLngBounds();**
                this.measurement.locations.forEach((location) => {
                    this.latlngBounds.extend(new window['google'].maps.LatLng(location.lat, location.lng))
                })
            }
        )
)

            <sebm-google-map
                    [latitude]="lat"
                    [longitude]="lng"
                    [zoomControl]="false"
                    [disableDefaultUI]="true"
                    [streetViewControl]="false"
                    [mapDraggable]="false"
                    **[fitBounds]="latlngBounds"**
                    [scrollwheel]="false">
                <sebm-google-map-marker
                        *ngFor="let location of measurement.locations"
                        [latitude]="location.lat"
                        [longitude]="location.lng">
                </sebm-google-map-marker>
            </sebm-google-map>

@trungk18 How to zoom out or zoom in to view all the markers after center the map?

@Jonatthu I haven't used it for long time, but have you tried the generateBounds function above?

@trungk18 Yes, and it is working but seems like is holding the last zoom applied by the user :/

@tscislo Is is possible to also include the constructor ?
I don't know the type of measurement en where can I find ILocation ?
I can only find Location in @angular/common

@Jonatthu look at the sebm container, it says: 'scrollwheel=false', no wonder you can't zoom in or out.

And if you change something after the initial latbounds you have to allocate the zoom level again to reset the latlngbounds.

@tscislo did it well and I managed to get it working. He used different variables but any programmer can figure that out.

I did it the following:

import { MapsAPILoader } from 'angular2-google-maps/core';

latlngBounds;

    constructor(
        ...
        private mapsAPILoader: MapsAPILoader
    ) { };

    this.mapsAPILoader.load().then(() => {
                    this.latlngBounds = new window['google'].maps.LatLngBounds();
                    this.markers.forEach((location) => {
                        this.latlngBounds.extend(new window['google'].maps.LatLng(location.lat, location.lng))
                    })
                });



md5-3b89998d3378d7952a828cbdec3a9606




 <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [disableDefaultUI]="false" [zoomControl]="false" (mapClick)="mapClicked($event)" [streetViewControl]="false" [fitBounds]="latlngBounds" class="content-map"> </sebm-google-map>

@Cacanny any way to put an offset to the map?

@VinceEeckhout
I updated my example and removed my custom ILocation interface which you do not need at all. I hope it helps!

@tscislo Thanks for help 👍
@Cacanny Thanks for help 👍

Hello @Cacanny and @tscislo how to use the same thing in observables. By doing the above things I am getting another issue. After passing the params again(re-rendering the page by the list of places) It shows the error that this.marker is undefined. Is there any other way. The answers are appreciated.
Does using NgZone solves this problem. If so, How to use Ngzone in this code.

How is this closed, documentation is not yet added to the API Documentation.

@tscislo where is your example please share the link so i can see

@samtidbit please take a look at my comment form 23 Jan

Yeah any real non-hacky example that we need to bring in other imports ?

@tscislo , its working fine. Thanks for the information.