El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Integrando Google Maps

Siguiente ►
►

En este tema, aprenderás cómo integrar Google Maps en tu aplicación Android. Google Maps es una herramienta poderosa que permite a los desarrolladores agregar mapas interactivos a sus aplicaciones, proporcionando una experiencia rica y dinámica para los usuarios.

Objetivos de Aprendizaje

  • Configurar el proyecto para usar Google Maps.
  • Obtener una clave de API de Google Maps.
  • Agregar un fragmento de mapa a tu aplicación.
  • Personalizar y manipular el mapa.

Requisitos Previos

  • Conocimientos básicos de Android Studio.
  • Familiaridad con XML y Java/Kotlin.
  • Conexión a Internet para obtener la clave de API y descargar las dependencias necesarias.

Paso 1: Configuración del Proyecto

1.1. Agregar Dependencias

Primero, necesitas agregar las dependencias de Google Maps en tu archivo build.gradle (nivel de aplicación).

dependencies {
    implementation 'com.google.android.gms:play-services-maps:18.0.2'
    implementation 'com.google.android.gms:play-services-location:19.0.1'
}

1.2. Obtener la Clave de API de Google Maps

Para usar Google Maps, necesitas una clave de API. Sigue estos pasos para obtenerla:

  1. Ve a la Consola de Google Cloud.
  2. Crea un nuevo proyecto o selecciona uno existente.
  3. Habilita la API de Google Maps para Android.
  4. Genera una clave de API y cópiala.

1.3. Agregar la Clave de API al Proyecto

Agrega la clave de API en el archivo AndroidManifest.xml.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <application
        ...>
        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="TU_CLAVE_DE_API_AQUÍ"/>
        ...
    </application>

</manifest>

Paso 2: Agregar un Fragmento de Mapa

2.1. Crear un Fragmento de Mapa en el Layout

Agrega un SupportMapFragment en tu archivo de diseño XML.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MapsActivity">

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

2.2. Configurar el Fragmento de Mapa en la Actividad

En tu actividad, configura el fragmento de mapa.

import androidx.fragment.app.FragmentActivity;
import android.os.Bundle;
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;

public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {

    private GoogleMap mMap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_maps);
        // Obtener el SupportMapFragment y notificar cuando el mapa esté listo para ser usado.
        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

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

        // Agregar un marcador en una ubicación específica y mover la cámara
        LatLng sydney = new LatLng(-34, 151);
        mMap.addMarker(new MarkerOptions().position(sydney).title("Marker in Sydney"));
        mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));
    }
}

Paso 3: Personalizar y Manipular el Mapa

3.1. Cambiar el Tipo de Mapa

Puedes cambiar el tipo de mapa (normal, satélite, híbrido, terreno).

mMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);

3.2. Agregar Marcadores y Líneas

Puedes agregar marcadores, líneas y otras formas al mapa.

// Agregar un marcador
LatLng location = new LatLng(-34, 151);
mMap.addMarker(new MarkerOptions().position(location).title("Marker Title"));

// Agregar una línea
PolylineOptions polylineOptions = new PolylineOptions()
        .add(new LatLng(-34, 151))
        .add(new LatLng(-35, 150));
mMap.addPolyline(polylineOptions);

3.3. Habilitar Controles de Usuario

Puedes habilitar o deshabilitar los controles de usuario como el zoom y la brújula.

mMap.getUiSettings().setZoomControlsEnabled(true);
mMap.getUiSettings().setCompassEnabled(true);

Ejercicio Práctico

Ejercicio 1: Agregar un Marcador Personalizado

  1. Agrega un marcador en una ubicación de tu elección.
  2. Personaliza el marcador con un título y un snippet.

Solución

LatLng customLocation = new LatLng(40.7128, -74.0060); // Nueva York
mMap.addMarker(new MarkerOptions()
        .position(customLocation)
        .title("New York City")
        .snippet("The Big Apple"));
mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(customLocation, 10));

Ejercicio 2: Dibujar una Ruta

  1. Dibuja una ruta entre dos puntos en el mapa usando Polyline.

Solución

PolylineOptions route = new PolylineOptions()
        .add(new LatLng(40.7128, -74.0060)) // Nueva York
        .add(new LatLng(34.0522, -118.2437)); // Los Ángeles
mMap.addPolyline(route);

Conclusión

En esta sección, has aprendido cómo integrar Google Maps en tu aplicación Android, desde la configuración inicial hasta la personalización del mapa. Ahora puedes agregar mapas interactivos a tus aplicaciones, mejorando significativamente la experiencia del usuario.

En el siguiente tema, exploraremos cómo implementar compras dentro de la aplicación, lo que te permitirá monetizar tus aplicaciones de manera efectiva.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados