El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Introducció

Google Maps és una eina poderosa que permet als desenvolupadors integrar mapes interactius a les seves aplicacions Android. Aquesta funcionalitat és útil per a una àmplia gamma d'aplicacions, des de serveis de lliurament fins a aplicacions de viatges i navegació. En aquest tema, aprendrem com integrar Google Maps en una aplicació Android, configurar les claus d'API necessàries i personalitzar el mapa segons les nostres necessitats.

Requisits Previs

Abans de començar, assegura't de tenir:

Un compte de Google.
Android Studio instal·lat i configurat.
Coneixements bàsics de desenvolupament d'Android.

Passos per Integrar Google Maps

Configuració del Projecte

1.1. Crear un Nou Projecte

Obre Android Studio.
Crea un nou projecte seleccionant "Empty Activity".
Assigna un nom al projecte i selecciona el llenguatge de programació (Kotlin o Java).

1.2. Afegir les Dependències de Google Maps

Afegeix les següents dependències al fitxer build.gradle (Module: app):

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

Obtenir la Clau d'API de Google Maps

Ves a la Google Cloud Console.
Crea un nou projecte o selecciona un projecte existent.
Activa l'API de Google Maps Platform.
Genera una clau d'API i copia-la.

Configurar el Fitxer `AndroidManifest.xml`

Afegeix els següents permisos i la clau d'API al fitxer AndroidManifest.xml:

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

    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        
        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="YOUR_API_KEY_HERE"/>

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>
</manifest>

Crear el Layout del Mapa

Crea un fitxer de disseny XML per a l'activitat principal (activity_main.xml) i afegeix un MapFragment:

<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=".MainActivity">

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

Inicialitzar el Mapa en l'Activitat

Modifica la classe MainActivity per inicialitzar el mapa:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
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

class MainActivity : AppCompatActivity(), OnMapReadyCallback {

    private lateinit var mMap: GoogleMap

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Obtenir el SupportMapFragment i notificar quan el mapa estigui llest per ser utilitzat.
        val mapFragment = supportFragmentManager
            .findFragmentById(R.id.map) as SupportMapFragment
        mapFragment.getMapAsync(this)
    }

    override fun onMapReady(googleMap: GoogleMap) {
        mMap = googleMap

        // Afegir un marcador a una ubicació específica i moure la càmera
        val sydney = LatLng(-34.0, 151.0)
        mMap.addMarker(MarkerOptions().position(sydney).title("Marker in Sydney"))
        mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney))
    }
}

Personalitzar el Mapa

Pots personalitzar el mapa afegint diferents tipus de mapes, controls de zoom, i altres opcions. Aquí tens alguns exemples:

6.1. Canviar el Tipus de Mapa

mMap.mapType = GoogleMap.MAP_TYPE_SATELLITE

6.2. Afegir Controls de Zoom

mMap.uiSettings.isZoomControlsEnabled = true

6.3. Afegir un Marcador Personalitzat

val customMarker = LatLng(40.7128, -74.0060)
mMap.addMarker(MarkerOptions().position(customMarker).title("Marker in New York").icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE)))

Exercici Pràctic

Objectiu

Crea una aplicació que mostri un mapa amb la teva ubicació actual i afegeixi un marcador en una ubicació específica.

Passos

Segueix els passos anteriors per configurar el projecte i obtenir la clau d'API.
Afegeix els permisos necessaris per accedir a la ubicació de l'usuari.
Utilitza la classe FusedLocationProviderClient per obtenir la ubicació actual de l'usuari.
Afegeix un marcador a la ubicació actual de l'usuari i mou la càmera a aquesta ubicació.

Solució

import android.Manifest
import android.content.pm.PackageManager
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.core.app.ActivityCompat
import com.google.android.gms.location.FusedLocationProviderClient
import com.google.android.gms.location.LocationServices
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

class MainActivity : AppCompatActivity(), OnMapReadyCallback {

    private lateinit var mMap: GoogleMap
    private lateinit var fusedLocationClient: FusedLocationProviderClient

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Obtenir el SupportMapFragment i notificar quan el mapa estigui llest per ser utilitzat.
        val mapFragment = supportFragmentManager
            .findFragmentById(R.id.map) as SupportMapFragment
        mapFragment.getMapAsync(this)

        fusedLocationClient = LocationServices.getFusedLocationProviderClient(this)
    }

    override fun onMapReady(googleMap: GoogleMap) {
        mMap = googleMap

        // Comprovar permisos
        if (ActivityCompat.checkSelfPermission(this, Manifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMISSION_GRANTED && ActivityCompat.checkSelfPermission(this, Manifest.permission.ACCESS_COARSE_LOCATION) != PackageManager.PERMISSION_GRANTED) {
            ActivityCompat.requestPermissions(this, arrayOf(Manifest.permission.ACCESS_FINE_LOCATION), 1)
            return
        }

        mMap.isMyLocationEnabled = true

        fusedLocationClient.lastLocation.addOnSuccessListener { location ->
            if (location != null) {
                val currentLocation = LatLng(location.latitude, location.longitude)
                mMap.addMarker(MarkerOptions().position(currentLocation).title("You are here"))
                mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(currentLocation, 15f))
            }
        }
    }
}

Conclusió

Integrar Google Maps en una aplicació Android és un procés relativament senzill que pot afegir una gran quantitat de funcionalitat a la teva aplicació. Amb els passos descrits anteriorment, pots començar a crear aplicacions que utilitzin mapes interactius, mostrin la ubicació de l'usuari i afegeixin marcadors personalitzats. Practica amb diferents opcions de personalització per adaptar el mapa a les necessitats específiques de la teva aplicació.

Integració de Google Maps

Introducció

Requisits Previs

Passos per Integrar Google Maps

Configuració del Projecte

1.1. Crear un Nou Projecte

1.2. Afegir les Dependències de Google Maps

Obtenir la Clau d'API de Google Maps

Configurar el Fitxer `AndroidManifest.xml`

Crear el Layout del Mapa

Inicialitzar el Mapa en l'Activitat

Personalitzar el Mapa

6.1. Canviar el Tipus de Mapa

6.2. Afegir Controls de Zoom

6.3. Afegir un Marcador Personalitzat

Exercici Pràctic

Objectiu

Passos

Solució

Conclusió

Curs d'Android Studio

Mòdul 1: Introducció a Android Studio

Mòdul 2: Desenvolupament Bàsic d'Android

Mòdul 3: Desenvolupament Intermedi d'Android

Mòdul 4: Desenvolupament Avançat d'Android

Mòdul 5: Desenvolupament Professional d'Android

Mòdul 6: Temes Especials

Integració de Google Maps

Introducció

Requisits Previs

Passos per Integrar Google Maps

Configuració del Projecte

1.1. Crear un Nou Projecte

1.2. Afegir les Dependències de Google Maps

Obtenir la Clau d'API de Google Maps

Configurar el Fitxer AndroidManifest.xml

Crear el Layout del Mapa

Inicialitzar el Mapa en l'Activitat

Personalitzar el Mapa

6.1. Canviar el Tipus de Mapa

6.2. Afegir Controls de Zoom

6.3. Afegir un Marcador Personalitzat

Exercici Pràctic

Objectiu

Passos

Solució

Conclusió

Curs d'Android Studio

Mòdul 1: Introducció a Android Studio

Mòdul 2: Desenvolupament Bàsic d'Android

Mòdul 3: Desenvolupament Intermedi d'Android

Mòdul 4: Desenvolupament Avançat d'Android

Mòdul 5: Desenvolupament Professional d'Android

Mòdul 6: Temes Especials

Configurar el Fitxer `AndroidManifest.xml`