Angular-google-maps: FitBounds usando

Me gustaría saber cómo generar límites a partir de mis marcadores para usar también esta función de ajuste. No pude por mi vida averiguar cómo crear un objeto LatLng para pasar a la función bound.extends para poder usar el enlace angular 2 y asignar la propiedad fitBounds de sebm-google-map-marker a mi variable de límites.
@suleymanozev : sé cómo usar fitbounds siempre que pueda generar un objeto LatLng. ¿Quieres trabajar juntos?

Mi trabajo temporal es recorrer los datos de mi dispositivo y simplemente calcular manualmente mi punto central usando el promedio entre el oeste, este, norte y sur, ya que no puedo ponerme en forma para trabajar. Obviamente, con este método obtendría el centro correcto, pero el nivel de zoom no sería el correcto.

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;

Actualizar
Decidí usar LatLngBoundsLiteral y asigné mi calculado este, oeste, norte, sur directamente y parece estar funcionando.

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

Entonces código HTML
<sebm-google-map #mygmap [latitude]="center.lat" [longitude]="center.lng" usePanning="true" [fitBounds]="boundsl">

Puede generar LatLngBounds con esta función:

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

La parte importante es que MapsApiLoader de angular2-google-maps, porque no puede usar el objeto google.maps antes de que se haya activado este evento.

Chicos, vi este compromiso de @SebastianM. https://github.com/SebastianM/angular2-google-maps/commit/d625ab6796768d167d7a0f9f2b9a504fce8a2bea
Parece que ya ha eliminado el atributo fitbounds. ¿Deberíamos utilizar la latitud y la longitud en su lugar?

Terminé generando los límites como los uso en AngularJS y luego calculé la latitud central y la longitud en función de los límites. Todavía hay algunas cosas más que manejar, por ejemplo, el nivel de zoom.

¿Podría ser útil para ustedes?

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>

Hola, comencé a usar esta biblioteca y es increíble. He estado buscando centrar mi mapa en función de los marcadores y no entiendo por qué esto se hace tan difícil ...
Declaré mis marcadores y escribí un método simple que centrará el mapa en función de los marcadores:

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 No entiendo por qué esto se hace tan difícil ...

Porque conseguir el centro está bien, pero ¿qué pasa con el nivel de 'zoom'? Aquí es donde entra en juego LatBounds y todavía tengo que encontrar una forma adecuada de implementar esto.

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 ¿Cómo alejar o acercar la imagen para ver todos los marcadores después de centrar el mapa?

@Jonatthu No lo he usado durante mucho tiempo, pero ¿ha probado la función generateBounds anterior?

@ trungk18 Sí, y está funcionando, pero parece que mantiene el último zoom aplicado por el usuario: /

@tscislo ¿Es posible incluir también el constructor?
No sé el tipo de medida y ¿dónde puedo encontrar una ubicación?
Solo puedo encontrar la ubicación en @ angular / common

@Jonatthu mira el contenedor sebm, dice: 'scrollwheel = false', no es de extrañar que no puedas acercar o alejar la imagen.

Y si cambia algo después de los latbounds iniciales, debe asignar el nivel de zoom nuevamente para restablecer los latlngbounds.

@tscislo lo hizo bien y logré que funcionara. Usó diferentes variables, pero cualquier programador puede darse cuenta de eso.

Lo hice lo siguiente:

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 ¿ alguna forma de poner un desplazamiento en el mapa?

@VinceEeckhout
Actualicé mi ejemplo y eliminé mi interfaz de ILocation personalizada que no necesitas en absoluto. ¡Espero que ayude!

@tscislo Gracias por la ayuda 👍
@Cacanny Gracias por la ayuda 👍

Hola @Cacanny y @tscislo cómo usar lo mismo en observables. Al hacer las cosas anteriores, tengo otro problema. Después de volver a pasar los parámetros (volver a representar la página por la lista de lugares), se muestra el error de que this.marker no está definido. Hay alguna otra manera. Se agradecen las respuestas.
¿Usar NgZone resuelve este problema? Si es así, Cómo usar Ngzone en este código.

¿Cómo se cierra? La documentación aún no se ha agregado a la documentación de la API.

@tscislo, ¿ dónde está tu ejemplo, comparte el enlace para que pueda verlo?

@samtidbit, por favor, eche un vistazo a mi formulario de comentarios 23 de enero

Sí, ¿algún ejemplo real no pirata que necesitemos incorporar a otras importaciones?

@tscislo , está funcionando bien. Gracias por la información.