name: portada
class: portada-slide, center, middle

# Google Maps
## Android

---
# Api Key
- Google ofereix una API per Android que ens permet accedir a les funcionalitats del seu servei Google Maps, de manera que podem afegir-les a la nostra app.
- Per poder utilitzar aquesta API hem de disposar d’una clau (API key).
- En aquet document aprendrem a configurar la nostra API key de Google Maps i el codi necessari per crear una aplicació que mostri un mapa i ens permeti treballar amb ell.

---
# Api Key
- Per generar una API key: https://console.cloud.google.com/
- Creem un nou projecte, el seleccionem i anem a l’apartat “API i serveis”. Hem d’habilitar el servei “Maps SDK for Android”.
- Ara hem de crear una API Key. Per això anem al menú “API i serveis > Credencials” i creem una nova credencial de tipus “Clau d’API”.

---
# Add key to project

- https://developers.google.com/maps/documentation/android-sdk/config#step_3_add_your_api_key_to_the_project
- https://developers.google.com/maps/documentation/android-sdk/config#step_4_update_the_app_manifest

----
# Dependencies gradle

```
dependencies {
    // Maps SDK for Android
    implementation("com.google.android.gms:play-services-maps:19.0.0")
}
```

---
# Maps Compose
```
@Composable
fun MapsScreen(){
    val singapore = LatLng(1.35, 103.87)
    val cameraPositionState = rememberCameraPositionState() {
        position = CameraPosition.fromLatLngZoom(singapore, 10f)
    }
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState
    )
}
```

---
# Maps Camera

```
val singapore = LatLng(1.35, 103.87)
val cameraPositionState: CameraPositionState = rememberCameraPositionState {
    position = CameraPosition.fromLatLngZoom(singapore, 11f)
}
Box(Modifier.fillMaxSize()) {
    GoogleMap(cameraPositionState = cameraPositionState)
    Button(onClick = {
        // Move the camera to a new zoom level
        cameraPositionState.move(CameraUpdateFactory.zoomIn())
    }) {
        Text(text = "Zoom In")
    }
}
```

---
# Maps makers
```
@SuppressLint("UnrememberedMutableState")
@Composable
fun MapsScreen(){
    GoogleMap(
        googleMapOptionsFactory = {
            GoogleMapOptions().mapId("DEMO_MAP_ID")
        },
    ) {
        AdvancedMarker(
            state = MarkerState(position = LatLng(-34.0, 151.0)),
            title = "Marker in Sydney"
        )
        AdvancedMarker(
            state = MarkerState(position = LatLng(35.66, 139.6)),
            title = "Marker in Tokyo"
        )
    }
}
```

---
# Google maps docs
https://github.com/googlemaps/android-maps-compose?tab=readme-ov-file