How to show all markers?

Question

I am developing an Ionic app where I need to show several points on the Google Maps map, I add all points as markers on the map and place the camera position to the center of the points.

pontos = [[23,13], [11, 45], ..., [22, 21]];

for (let p of pontos) {
    this.map.addMarkerSync({
        position: {
            lat: p[0],
            lng: p[1]
        }
    });
}

The problem is that the zoom does not allow all points to be viewed. My question is: how do I calculate the zoom so that all the added points appear?

Answer 1

Create a Latlngbounds that includes all points.

Use CameraUpdateFactory.newLatLngBounds(LatLngBounds bounds, int padding) to obtain a Cameraupdate that will cause the camera to display the screen-centered Latlngbounds by zooming in as much as possible.

Use this Cameraupdate in the method animateCamera() map.

The terminology used is for Android Java. I suppose there is the equivalent in Ionic/javascript.

Answer 2

var myLatLng = {lat: -23.584460, lng: -46.718901};
          this.map = new window.google.maps.Map(document.getElementById('map'), {
          center: myLatLng,
          zoom: 9,
          icon: this.image
        });
}

I used that zoom and I could see everything, zoom in and back