Harita ve konum teknolojileri ile hayatımızdaki birçok probleme çözüm sağlayarak işlerimizi kolaylaştırıyoruz. Bu yüzden yazılım projelerimizde harita kullanımı çok önemlidir.
Bu makale, Compose yapısında harita(maps) oluşturmayı ve konum bilgisini kullanmayı örnekleyecektir.
Örnek projemizi için sırasıyla ayar adımlarını ve kodlarımızı uygulayalım.
1- Google Play Services Yükleme
Google haritayla ilgili bir geliştirme yapacağımızdan dolayı, Google Play Services yüklememiz gerekmektedir. Bunun için Tools->Sdk manager’ı açıp Sdk Tools bölümünden Google Play Services işaretleyip, yükleme işlemini gerçekleştirin.
2- Google Maps API Key Oluşturma
Google Cloud sitesinde API Key oluşturma adımları video anlatmış bulunmaktayım. Videoda Direction API yerine Maps SDK for Android kütüphanesini aktif etmenizi öneririm.
3-Gerekli Kütüphanelerin Eklenmesi
Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Google Play services kütüphanesini yüklüyoruz.
|
1 2 |
implementation 'com.google.maps.android:maps-compose:2.7.2' implementation 'com.google.android.gms:play-services-maps:18.1.0' |
Diğer bir önemli konu build.gradle dosyalarınızda belirtilen compose versiyonunun minimum 1.2.0 olmasıdır. Compose Compiler versiyonlarına uyumlu kotlin versiyonlarına dikkat ediniz
- Proje ana dizinindeki build.gradle dosyanızı açın.
Bu build.gradle dosyasında plugins kodları arasında org.jetbrains.kotlin.android version ‘1.7.0’ olmalıdır.12345buildscript {ext {compose_ui_version = '1.2.0'}} - Projemin app dizinin altındaki build.gradle dosyasında kotlinCompilerExtensionVersion ‘1.2.0’ olmalıdır.
4-AndroidManifest Dosyasına İlgili Ayarları Ekleme
Belirtilecek konumun yer bilgisini almak için internet iznine ihtiyaç bulunmaktadır. Aşağıdaki izin kodunu da AndroidManifest.xml dosyasında application tag’nin üst kısmına yerleştirin.
|
1 |
<uses-permission android:name="android.permission.INTERNET"/> |
AndroidManifest dosyasına, daha önce üretmiş olduğumuz Google API Key’i ekleme işlemini yapacağız. Application tag arasına aşağıda görmüş olduğunuz meta-data tag kodunun içindeki value özelliğine Google API Key’i ekleyeniz.
|
1 2 |
<meta-data android:name="com.google.android.geo.API_KEY" android:value="AIzaSyB20HoSsbKFvQiWoI9RL7GGXf1KRwdxyoc" /> |
5- Haritayı Compose’da Uygulama
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import com.google.android.gms.maps.model.* import com.google.maps.android.compose.* class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { Maps(LatLng(41.0391643,29.0004594)) } } } @Composable fun Maps(ubicacion: LatLng){ //Harita açıldığında konumun büyütülerek gösterilmesi val cameraPositionState= rememberCameraPositionState{ position = CameraPosition.fromLatLngZoom(ubicacion,12f) } //Haritayı kullanma ve Konum bilgisine göre haritaya marker ekleme val lugar = rememberMarkerState(position = ubicacion) GoogleMap( modifier = Modifier.fillMaxSize(), cameraPositionState = cameraPositionState, onMapClick={ lugar.position = it} ){ //Marker konumunu ve başlık değeri atama Marker( state = MarkerState(position = ubicacion), title = "Dolmabahçe Sarayı", ) } } |
Proje kodlarına github linkinden ulaşabilirsiniz.
