How to fit the polyline inside the screen in the ionic native google map?


#1

I am using ionic-native-google-map to render map in my Ionic 3 application. I have rendered a polyline from some LatLng points. Now, i want to fit the polyline in the map such that i can see the whole polyline in the map at a glance. I am using below code:

ionViewDidLoad() {
    this.platform.ready().then(() => {
      let element = this.mapElement.nativeElement;

      let latLngPointBounds = new LatLngBounds(this.routePoints);
      let mapOptions: GoogleMapOptions = {
        camera: {
          target: latLngPointBounds.getCenter(),
          zoom: 20
        },
        controls: {
          compass: true,
          myLocationButton: true,
          myLocation: true,
          zoom: true,
          mapToolbar: true
        }
      };
      this.map = GoogleMaps.create(element, mapOptions);

      this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
        this.map.addPolyline({
          points: this.routePoints,
          'color': '#AA00FF',
          'width': 4,
          'geodesic': true
        }).then((resp) => {
          let restaurantMarkerOptions: MarkerOptions = {
            title: "Sample Title",
            position: this.routePoints[this.routePoints.length - 1],
            animation: GoogleMapsAnimation.BOUNCE
          };
          this.map.addMarker(restaurantMarkerOptions).then((marker: Marker) => {
            marker.showInfoWindow();
          });
        });
      });
    });
  }

You can see i have set the zoom: 20, so for some polyline it fits nicely.

But some polyline does not fits at this zoom level.

So, how can i dynamically set the zoom so that i can always fit the full polyline in the map without zooming in or zooming out?

Is there any tweaking of LatLngBounds to do that?


#2
      let mapOptions: GoogleMapOptions = {
        camera: {
          target: this.routePoints
        },
        controls: {
          compass: true,
          myLocationButton: true,
          myLocation: true,
          zoom: true,
          mapToolbar: true
        }
      };