¿Cómo Agregar Marcadores Dinámicos en Google Maps con Firebase Firstore?

Hemos visto añadir marcadores a Google Maps en Android . Junto con eso, también hemos agregado múltiples marcadores en Google Maps en Android. Muchas aplicaciones usan una función dinámica para agregar un marcador en Google Maps y actualizarlos según los requisitos. En este artículo, veremos cómo agregar marcadores a Google Map desde Firebase en Android. 

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación simple en la que mostraremos un mapa con un marcador simple y le agregaremos un marcador desde Firebase. Tenemos que agregar marcadores de Firebase Firestore a nuestro mapa. qué

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación. Asegúrese de seleccionar Actividad de mapas al crear un nuevo proyecto.

Paso 2: generar una clave API para usar Google Maps

Para generar la clave API para Maps, puede consultar Cómo generar la clave API para usar Google Maps en Android . Después de generar su clave API para Google Maps. Tenemos que añadir esta clave a nuestro Proyecto. Para agregar esta clave en nuestra aplicación, navegue a la carpeta de valores> archivo google_maps_api.xml y en la línea 23 debe agregar su clave API en lugar de YOUR_API_KEY . 

Paso 3: Conexión de su aplicación con Firebase

Después de crear un nuevo proyecto y agregar una clave para Google Maps. Navegue a la opción Herramientas en la barra superior. Dentro de eso, haga clic en Firebase. Después de hacer clic en Firebase, puede ver la columna de la derecha que se menciona a continuación en la captura de pantalla.

Dentro de esa columna, navegue hasta Firebase Cloud Firestore. Haga clic en esa opción y verá dos opciones en Conectar la aplicación a Firebase y Agregar Cloud Firestore a su aplicación. Haga clic en la opción Conectar ahora y su aplicación se conectará a Firebase. Después de eso, haga clic en la segunda opción y ahora su aplicación está conectada a Firebase. Después de conectar su aplicación a Firebase, verá la siguiente pantalla.  

Después de eso, verifique que la dependencia de la base de datos Firebase Firestore se haya agregado a nuestro archivo Gradle. Navegue a la aplicación > Gradle Scripts dentro de ese archivo. Compruebe si la siguiente dependencia se agrega o no. Si la dependencia a continuación no está presente en su archivo build.gradle . Agregue la siguiente dependencia en la sección de dependencias.  

implementación ‘com.google.firebase:firebase-firestore:22.0.1’

Después de agregar esta dependencia, sincronice su proyecto y ahora estamos listos para crear nuestra aplicación. Si desea obtener más información sobre cómo conectar su aplicación a Firebase. Consulte este artículo para obtener detalles sobre cómo agregar Firebase a la aplicación de Android .  

Paso 4: Trabajar con el archivo AndroidManifest.xml

Para agregar datos a Firebase, deberíamos otorgar permisos para acceder a Internet. Para agregar estos permisos, vaya a la aplicación > AndroidManifest.xml . Dentro de ese archivo, agregue los siguientes permisos.  

<!--Permissions for internet-->
<uses-permission android:name="android.permission.INTERNET" /> 
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Paso 5: trabajar con el archivo MapsActivity.java

MapsActivity.java MapsActivity.java

import android.os.Bundle;
import android.widget.Toast;
  
import androidx.annotation.Nullable;
import androidx.fragment.app.FragmentActivity;
  
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;
import com.google.firebase.firestore.DocumentReference;
import com.google.firebase.firestore.DocumentSnapshot;
import com.google.firebase.firestore.EventListener;
import com.google.firebase.firestore.FirebaseFirestore;
import com.google.firebase.firestore.FirebaseFirestoreException;
import com.google.firebase.firestore.GeoPoint;
  
public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {
  
    private GoogleMap mMap;
    FirebaseFirestore db;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_maps);
          
        // initializing our firebase firestore.
        db = FirebaseFirestore.getInstance();
         
        // 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
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;
          
        // creating a variable for document reference.
        DocumentReference documentReference = db.collection("MapsData").document("7QWDor9vozLaHdFYV9kh");
          
        // calling document reference class with on snap shot listener.
        documentReference.addSnapshotListener(new EventListener<DocumentSnapshot>() {
            @Override
            public void onEvent(@Nullable DocumentSnapshot value, @Nullable FirebaseFirestoreException error) {
                if (value != null && value.exists()) {
                    // below line is to create a geo point and we are getting
                    // geo point from firebase and setting to it.
                    GeoPoint geoPoint = value.getGeoPoint("geoPoint");
                      
                    // getting latitude and longitude from geo point 
                    // and setting it to our location.
                    LatLng location = new LatLng(geoPoint.getLatitude(), geoPoint.getLongitude());
                      
                    // adding marker to each location on google maps
                    mMap.addMarker(new MarkerOptions().position(location).title("Marker"));
                      
                    // below line is use to move camera.
                    mMap.moveCamera(CameraUpdateFactory.newLatLng(location));
                } else {
                    Toast.makeText(MapsActivity.this, "Error found is " + error, Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

Paso 6: Agregar datos a Firebase Firestore en Android

Vaya al navegador y abra Firebase en su navegador. Después de abrir Firebase, verá la página siguiente y, en esta página, haga clic en la opción Ir a la consola en la esquina superior derecha.    

Después de hacer clic en esta pantalla, verá la pantalla a continuación con todo su proyecto dentro que selecciona su proyecto.  

Dentro de esa pantalla, haga clic en Firebase Firestore Database en la ventana izquierda.  

Después de hacer clic en la opción Crear base de datos, verá la siguiente pantalla.  

Dentro de esta pantalla, tenemos que seleccionar la opción Iniciar en modo de prueba. Estamos usando el modo de prueba porque no estamos configurando la autenticación dentro de nuestra aplicación. Así que estamos seleccionando Iniciar en modo de prueba. Después de seleccionar el modo de prueba, haga clic en la opción Siguiente y verá la siguiente pantalla.  

Dentro de esta pantalla, solo tenemos que hacer clic en el botón Habilitar para habilitar nuestra base de datos Firebase Firestore. Después de completar este proceso, solo tenemos que ejecutar nuestra aplicación y agregar datos dentro de nuestra aplicación y hacer clic en el botón Enviar. Para agregar datos, simplemente haga clic en el botón Iniciar colección y proporcione el ID de colección como MapsData . Después de eso, proporcione la identificación del documento como 7QWDor9vozLaHdFYV9kh y dentro del campo escriba geoPoint , seleccione el tipo como geopoint e ingrese la latitud y la longitud de la ubicación deseada. Por último, haga clic en el botón Guardar.

Después de agregar los datos a Firebase. Ahora ejecute su aplicación y vea el resultado de la aplicación. Puede cambiar el valor en el geopunto con su campo de latitud y longitud y puede ver las actualizaciones en tiempo real en sus mapas con marcadores agregados.  

Producción: