Como Centrar Múltiples Marcadores en un Mapa de Google en Android con Java

4 minuto(s)

En esta página:

Demo Github

Los Mapas de Google en la actualidad son muy utilizados en los pequeños, medianos o grandes Proyectos, no solo están presentes en Páginas Web si no también en Aplicaciones Móviles, hay algunas aplicaciones que necesitan mostrar al usuario todos los marcadores en una misma vista de la pantalla del Dispositivo en Android, en este Post te compartiré una manera de hacer esto.

Antes de continuar con este Post te invito a leer otros artículos referentes a Android en el siguiente enlace, en el enlace encontrará múltiples Posts que te ayudarán a expandir tu conocimiento sobre el Desarrollo de Aplicaciones en Android.

Actividad del Mapa

Tengo un archivo llamado GoogleMapsActivity.java en donde tengo 2 métodos primordiales para que mi aplicación pueda mostrar los Marcadores con las respectivas ubicaciones, uno de los métodos es onCreate en donde llamo al layout con el mapa de Google


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_maps);
    // Obtain the SupportMapFragment and get notified when the map is ready to be used.
    SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
            .findFragmentById(R.id.map);
    mapFragment.getMapAsync(this);
}

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_maps);

// Obtain the SupportMapFragment and get notified when the map is ready to be used.

SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()

.findFragmentById(R.id.map);

mapFragment.getMapAsync(this);

}

Debajo de mi método onCreate voy agregar el método onMapReady que es el nombre de método que Android nos pide definir para poder gestionar el mapa de Google y dentro del método onMapReady voy a empezar colocando 2 marcadores o ubicaciones, un marcador hace referencia a Machu Picchu – Perú y el otro marcador a Lima – Perú


public void onMapReady(GoogleMap googleMap) {
    mMap = googleMap;

    LatLng marcador1 = new LatLng(-13.5242178, -71.9754913);
    mMap.addMarker(new MarkerOptions()
            .position(marcador1)
            .title("Machu Picchu - Perú")
            .icon(BitmapDescriptorFactory.fromResource(R.drawable.marcador)));

    LatLng marcador2 = new LatLng(-12.0262676, -77.1278653);
    mMap.addMarker(new MarkerOptions()
            .position(marcador2)
            .title("Lima - Perú")
            .icon(BitmapDescriptorFactory.fromResource(R.drawable.marcador)));

}

public void onMapReady(GoogleMap googleMap) {

mMap = googleMap;

LatLng marcador1 = new LatLng(-13.5242178, -71.9754913);

mMap.addMarker(new MarkerOptions()

.position(marcador1)

.title("Machu Picchu - Perú")

.icon(BitmapDescriptorFactory.fromResource(R.drawable.marcador)));

LatLng marcador2 = new LatLng(-12.0262676, -77.1278653);

mMap.addMarker(new MarkerOptions()

.position(marcador2)

.title("Lima - Perú")

.icon(BitmapDescriptorFactory.fromResource(R.drawable.marcador)));

}

Si corro mi aplicación en un dispositivo físico puedo ver que no aparecen los marcadores y si me desplazo en el mapa hacia la izquierda recién puedo ver los marcadores y esto no es lo que buscamos

A continuación voy a centrar los marcadores en el Mapa de esta manera tendremos siempre a la vista en la pantalla todas las ubicaciones

Centrar Marcadores en la Pantalla del Dispositivo

Paso seguido debajo de los marcadores o ubicaciones voy a crear una variable llamada constructor en donde hago uso del método LatLngBounds.Builder el cual me permite crear los limites utilizando la Latitud y la Longitud de las ubicaciones


LatLngBounds.Builder constructor = new LatLngBounds.Builder();

LatLngBounds.Builder constructor = new LatLngBounds.Builder();

Bien ahora le paso la variable constructor a mis marcadores o ubicaciones


constructor.include(marcador1);
constructor.include(marcador2);

constructor.include(marcador1);

constructor.include(marcador2);

Ahora crearé una variable llamada limites en donde almaceno los limites obtenidos


LatLngBounds limites = constructor.build();

LatLngBounds limites = constructor.build();

Luego creo 1 variable llamada ancho y dentro de ella accedo al método displayMetrics de Android con el cual puedo obtener el ancho, alto, densidad de la pantalla del Dispositivo, etc., pero específicamente voy a obtener el ancho de la Pantalla del Dispositivo con el método widthPixels


int ancho = getResources().getDisplayMetrics().widthPixels;

int ancho = getResources().getDisplayMetrics().widthPixels;

También creo una variable llamada alto en donde igual que con la variable ancho hago uso del método displayMetrics pero esta vez voy a obtener el alto de la Pantalla del Dispositivo con el método heightPixels


int alto = getResources().getDisplayMetrics().heightPixels;

int alto = getResources().getDisplayMetrics().heightPixels;

Paso seguido creo una variable llamada padding en donde multiplico el valor de mi variable alto por 25 %

En este punto creo una variable llamada centrarmarcadores en donde hago uso del método CameraUpdateFactory que me permite cambiar la cámara según los valores de mis variables limites, ancho, alto y padding que he creado anteriormente

Por último muevo la cámara del dispositivo y centro los marcadores en la pantalla con el método animateCamera le paso el mapa de Google mMap


int padding = (int) (alto * 0.25); // 25% de espacio (padding) superior e inferior 

CameraUpdate centrarmarcadores = CameraUpdateFactory.newLatLngBounds(limites, ancho, alto, padding);

mMap.animateCamera(centrarmarcadores);

int padding = (int) (alto * 0.25); // 25% de espacio (padding) superior e inferior

CameraUpdate centrarmarcadores = CameraUpdateFactory.newLatLngBounds(limites, ancho, alto, padding);

mMap.animateCamera(centrarmarcadores);

Si corro nuevamente mi aplicación los marcadores aparecen en el centro de la Pantalla del Dispositivo

A continuación todo el código completo


public void onMapReady(GoogleMap googleMap) {
    mMap = googleMap;

    LatLng marcador1 = new LatLng(-13.5242178, -71.9754913);
    mMap.addMarker(new MarkerOptions()
            .position(marcador1)
            .title("Machu Picchu - Perú")
            .icon(BitmapDescriptorFactory.fromResource(R.drawable.marcador)));
    mMap.moveCamera(CameraUpdateFactory.newLatLng(marcador1));

    LatLng marcador2 = new LatLng(-12.0262676, -77.1278653);
    mMap.addMarker(new MarkerOptions()
            .position(marcador2)
            .title("Lima - Perú")
            .icon(BitmapDescriptorFactory.fromResource(R.drawable.marcador)));
    mMap.moveCamera(CameraUpdateFactory.newLatLng(marcador2));

    // Centrar Marcadores
    LatLngBounds.Builder constructor = new LatLngBounds.Builder();

    constructor.include(marcador1);
    constructor.include(marcador2);

    LatLngBounds limites = constructor.build();

    int ancho = getResources().getDisplayMetrics().widthPixels;
    int alto = getResources().getDisplayMetrics().heightPixels;
    int padding = (int) (alto * 0.25); // 25% de espacio (padding) superior e inferior

    CameraUpdate centrarmarcadores = CameraUpdateFactory.newLatLngBounds(limites, ancho, alto, padding);

    mMap.animateCamera(centrarmarcadores);

}

public void onMapReady(GoogleMap googleMap) {

mMap = googleMap;

LatLng marcador1 = new LatLng(-13.5242178, -71.9754913);

mMap.addMarker(new MarkerOptions()

.position(marcador1)

.title("Machu Picchu - Perú")

.icon(BitmapDescriptorFactory.fromResource(R.drawable.marcador)));

mMap.moveCamera(CameraUpdateFactory.newLatLng(marcador1));

LatLng marcador2 = new LatLng(-12.0262676, -77.1278653);

mMap.addMarker(new MarkerOptions()

.position(marcador2)

.title("Lima - Perú")

.icon(BitmapDescriptorFactory.fromResource(R.drawable.marcador)));

mMap.moveCamera(CameraUpdateFactory.newLatLng(marcador2));

// Centrar Marcadores

LatLngBounds.Builder constructor = new LatLngBounds.Builder();

constructor.include(marcador1);

constructor.include(marcador2);

LatLngBounds limites = constructor.build();

int ancho = getResources().getDisplayMetrics().widthPixels;

int alto = getResources().getDisplayMetrics().heightPixels;

int padding = (int) (alto * 0.25); // 25% de espacio (padding) superior e inferior

CameraUpdate centrarmarcadores = CameraUpdateFactory.newLatLngBounds(limites, ancho, alto, padding);

mMap.animateCamera(centrarmarcadores);

}

Conclusión

De esta manera podemos centrar los marcadores en la pantalla del dispositivo, existen otras formas de hacerlo, en el Demo que esta al inicio de este Tutorial puedes ver un ejemplo con 3 y 4 marcadores en donde puedes ver como funciona esta forma de centrar múltiples marcadores en la pantalla del Dispositivo Android.

Nota(s)

Algunos de los pasos y reglas mencionadas pueden variar en el futuro, esto no depende de Nosotros si no de los desarrolladores que dan soporte a Java, Google Maps y Android.
En el emulador de Android Studio no me centra los marcadores quizás porque el emulador no tiene los recursos que tiene un dispositivo físico, pero en un dispositivo físico si centra los marcadores sin problemas.

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.