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?
