Kotlin 04.1'de gelişmiş Android: Android Google Haritalar

1. Başlamadan önce

Google Haritalar ile uygulama oluşturmak, uygulamanıza uydu görüntüleri, haritalar için güçlü kullanıcı arayüzü kontrolleri, konum izleme ve konum işaretçileri gibi özellikler eklemenize olanak tanır. İyi bilinen balıkçılık veya tırmanış bölgelerinin konumları gibi kendi veri kümenizdeki bilgileri göstererek standart Google Haritalar'a değer katabilirsiniz. Ayrıca oyuncunun fiziksel dünyayı keşfettiği, hazine avı veya artırılmış gerçeklik oyunları gibi oyunlar da oluşturabilirsiniz.

Bu derste, özelleştirilmiş haritalar görüntüleyen ve kullanıcının konumunu gösteren Wander adlı bir Google Haritalar uygulaması oluşturacaksınız.

Ön koşullar

Şunlara dair bilgi sahibi:

  • Temel bir Android uygulaması oluşturup Android Studio kullanarak çalıştırma.
  • Dizeler gibi kaynakları oluşturma ve yönetme
  • Android Studio kullanarak kodu yeniden düzenleme ve değişkenleri yeniden adlandırma.
  • Google haritaları kullanıcı olarak nasıl kullanılır?
  • Çalışma zamanı izinlerini ayarlama.

Neler öğreneceksiniz?

  • Google API Konsolu'ndan API anahtarı alma ve anahtarı uygulamanıza kaydetme
  • Google Haritası'nı uygulamanıza entegre etme
  • Farklı harita türleri nasıl görüntülenir?
  • Google Haritası'nın stilini belirleme
  • Haritanıza işaretçi ekleme
  • Kullanıcının önemli bir yere (ÖY) işaretçi yerleştirmesini sağlama
  • Konum izleme nasıl etkinleştirilir?
  • Yerleşik bir Google Haritası olan Wander uygulaması nasıl oluşturulur?
  • Uygulamanız için işaretçiler ve stil özellikleri gibi özel özellikler oluşturma
  • Uygulamanızda konum izlemeyi etkinleştirme

2. Uygulamaya genel bakış

Bu codelab'de, özel stil özellikleri olan bir Google haritası görüntüleyen Wander uygulamasını oluşturacaksınız. Wander uygulaması konumlara işaretçi bırakmanıza, yer paylaşımları eklemenize ve konumunuzu gerçek zamanlı olarak görmenize olanak tanır.

5b12eda7f467bc2f.png

3. Görev: Projeyi oluşturun ve API anahtarı alın

Android için Haritalar SDK'sı bir API anahtarı gerektirir. API anahtarını almak için projenizi API & Hizmetler sayfası. API anahtarı, uygulamayı yazarına bağlayan dijital bir sertifikaya bağlıdır. Dijital sertifikaları kullanma ve uygulamanızı imzalama hakkında daha fazla bilgi edinmek için Uygulamanızı imzalama başlıklı makaleye göz atın.

Bu codelab'de, hata ayıklama sertifikası için API anahtarını kullanacaksınız. Hata ayıklama sertifikası, Hata ayıklama derlemenizi imzalama bölümünde açıklandığı gibi güvenli değildir. Android için Haritalar SDK'sını kullanan yayınlanmış Android uygulamaları ikinci bir API anahtarı gerektirir: sürüm sertifikasının anahtarı. Sürüm sertifikası alma hakkında daha fazla bilgi için API Anahtarı Alma başlıklı makaleyi inceleyin.

Android Studio, faydalı şablon kodu oluşturan bir Google Haritalar Etkinlik şablonu içerir. Şablon kodu, API anahtarı alma işlemini basitleştiren bir bağlantı içeren google_maps_api.xml dosyasını içerir.

1. Adım: Harita şablonuyla Wander projesini oluşturun

  1. Yeni bir Android Studio projesi oluşturun.
  2. Google Haritalar Etkinliği şablonunu seçin.

d6b874bb19ea68cd.png

  1. Projeyi Wander olarak adlandırın.
  2. Minimum API düzeyini API 19 olarak ayarlayın. Dilin Kotlin olduğundan emin olun.
  3. Son'u tıklayın.
  4. Uygulamanın geliştirilmesi tamamlandıktan sonra projenize ve Android Studio'nun sizin için oluşturduğu haritayla ilgili aşağıdaki dosyalara göz atın:

google_maps_api.xml - API anahtarınızı tutmak için bu yapılandırma dosyasını kullanırsınız. Şablon, biri hata ayıklama, diğeri yayın için olmak üzere iki google_maps_api.xml dosyası oluşturur. Hata ayıklama sertifikasının API anahtarı dosyası, src/debug/res/values konumunda bulunur. Sürüm sertifikasının API anahtarı dosyası, src/release/res/values konumunda bulunur. Bu codelab'de yalnızca hata ayıklama sertifikasını kullanacaksınız.

activity_maps.xml: Bu düzen dosyası, ekranın tamamını kaplayan tek bir parça içerir. SupportMapFragment sınıfı, Fragment sınıfının bir alt sınıfıdır. SupportMapFragment, bir uygulamaya harita yerleştirmenin en basit yoludur. Gerekli yaşam döngüsü ihtiyaçlarını otomatik olarak yerine getirmek için harita görünümünün etrafına bir sarmalayıcı oluşturur.

Ek name özelliğiyle herhangi bir ViewGroup öğesinde <fragment> etiketini kullanarak bir düzen dosyasına SupportMapFragment ekleyebilirsiniz.

android:name="com.google.android.gms.maps.SupportMapFragment"

MapsActivity.java: MapsActivity.java dosyası, onCreate() yönteminde SupportMapFragment öğesini örneklendirir ve Haritalar sistemini ve görünümü otomatik olarak başlatmak için getMapAsync(). SupportMapFragment öğesini içeren etkinlik, OnMapReadyCallback arayüzünü ve bu arayüzün onMapReady() yöntemini uygulamalıdır. onMapReady() yöntemi, harita yüklendiğinde çağrılır.

2. Adım: API anahtarını edinin

  1. google_maps_api.xml dosyasının hata ayıklama sürümünü açın.
  2. Dosyada, URL'si uzun olan bir yorumu arayın. URL parametreleri, uygulamanızla ilgili belirli bilgileri içerir.
  3. URL'yi kopyalayıp bir tarayıcıya yapıştırın.
  4. API'ler ve Hizmetler sayfası. Sağlanan URL'deki parametreler nedeniyle sayfa, Android için Haritalar SDK'sının otomatik olarak etkinleştirileceğini bilir.
  5. Create an API Key'i (API Anahtarı Oluştur) tıklayın.
  6. Sonraki sayfada API Anahtarları bölümüne gidin ve az önce oluşturduğunuz anahtarı tıklayın.
  7. Anahtarın kullanımını Android uygulamalarıyla kısıtlamak için Anahtarı Kısıtla'yı tıklayın ve Android için Haritalar SDK'sı'nı seçin.
  8. Oluşturulan API anahtarını kopyalayın. "AIza"" ile başlar.
  9. google_maps_api.xml dosyasında, anahtarı YOUR_KEY_HERE yazan google_maps_key dizesine yapıştırın.
  10. Uygulamanızı çalıştırın. Etkinliğinizde, Avustralya, Sidney'de bulunan bir işaretçiyle birlikte yerleştirilmiş bir harita göreceksiniz. (Sidney işaretçisi şablonun bir parçasıdır ve daha sonra bunu değiştirirsiniz.)

34dc9dd877c90996.png

3. Adım: mmap'i yeniden adlandırın

MapsActivity, GoogleMap türünde mMap adında gizli bir lateinit var öğesine sahip. Kotlin adlandırma kurallarına uymak için mMap öğesinin adını map olarak değiştirin.

  1. MapsActivity içinde mMap öğesini sağ tıklayıp Yeniden düzenle'yi tıklayın > Yeniden adlandır...

e713ccb3384450c6.png

  1. Değişken adını map olarak değiştirin.

onMapReady() işlevindeki tüm mMap referanslarının da map olarak değiştiğine dikkat edin.

4. Görev: Harita türleri ekleyin

Google Haritalar çeşitli harita türleri içerir: normal, karma, uydu, arazi ve "yok" (hiç harita için değil).

Normal harita

Uydu haritası

Karma harita

Arazi haritası

Her harita türü, farklı türde bilgiler sağlar. Örneğin, bir arabada navigasyon için haritaları kullanırken sokak adlarını görmek faydalı olacaktır. Dolayısıyla, normal seçeneğini kullanabilirsiniz. Yürüyüş yaparken arazi haritası, zirveye çıkmak için ne kadar daha çıkmanız gerektiğine karar vermenize yardımcı olabilir.

Bu görevde:

  1. Kullanıcının harita türünü değiştirmesine olanak tanıyan seçenekler menüsünün bulunduğu bir uygulama çubuğu ekleyin.
  2. Haritanın başlangıç konumunu kendi evinizin konumuna taşıyın.
  3. Haritada tek bir konumu gösteren ve etiket içerebilen işaretçiler için destek ekleyin.

Harita türleri menüsü ekle

Bu adımda, kullanıcının harita türünü değiştirmesine olanak tanıyan seçenekler menüsünün bulunduğu bir uygulama çubuğu eklersiniz.

  1. Yeni bir menü XML dosyası oluşturmak için res dizininizi sağ tıklayın ve Yeni > Android Kaynak Dosyası.
  2. İletişim kutusunda dosyayı map_options olarak adlandırın.
  3. Kaynak türü için Menü'yü seçin.
  4. Tamam'ı tıklayın.
  5. Kod sekmesinde, harita menüsü seçeneklerini oluşturmak için yeni dosyadaki kodu aşağıdaki kodla değiştirin. "Hiçbiri" "none" nedeniyle harita türü atlandı hiç harita olmamasıyla sonuçlanıyor. Bu adım bir hataya neden olur, ancak bir sonraki adımda bu sorunu çözeceksiniz.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
   <item
       android:id="@+id/normal_map"
       android:title="@string/normal_map"
       app:showAsAction="never" />
   <item
       android:id="@+id/hybrid_map"
       android:title="@string/hybrid_map"
       app:showAsAction="never" />
   <item
       android:id="@+id/satellite_map"
       android:title="@string/satellite_map"
       app:showAsAction="never" />
   <item
       android:id="@+id/terrain_map"
       android:title="@string/terrain_map"
       app:showAsAction="never" />
</menu>
  1. strings.xml ürününde, title özelliklerine ait kaynakları ekleyerek hataları düzeltin.
<resources>
   ...
   <string name="normal_map">Normal Map</string>
   <string name="hybrid_map">Hybrid Map</string>
   <string name="satellite_map">Satellite Map</string>
   <string name="terrain_map">Terrain Map</string>
   <string name="lat_long_snippet">Lat: %1$.5f, Long: %2$.5f</string>
   <string name="dropped_pin">Dropped Pin</string>
   <string name="poi">poi</string>
</resources>
  1. MapsActivity içinde onCreateOptionsMenu() yöntemini geçersiz kılın ve map_options kaynak dosyasından menüyü şişirin.
override fun onCreateOptionsMenu(menu: Menu?): Boolean {
   val inflater = menuInflater
   inflater.inflate(R.menu.map_options, menu)
   return true
}
  1. MapsActivity.kt politikasında onOptionsItemSelected() yöntemini geçersiz kılın. Kullanıcının seçimini yansıtmak için harita türü sabitleri kullanarak harita türünü değiştirin.
override fun onOptionsItemSelected(item: MenuItem) = when (item.itemId) {
   // Change the map type based on the user's selection.
   R.id.normal_map -> {
       map.mapType = GoogleMap.MAP_TYPE_NORMAL
       true
   }
   R.id.hybrid_map -> {
       map.mapType = GoogleMap.MAP_TYPE_HYBRID
       true
   }
   R.id.satellite_map -> {
       map.mapType = GoogleMap.MAP_TYPE_SATELLITE
       true
   }
   R.id.terrain_map -> {
       map.mapType = GoogleMap.MAP_TYPE_TERRAIN
       true
   }
   else -> super.onOptionsItemSelected(item)
}
  1. Uygulamayı çalıştırın.
  2. Harita türünü değiştirmek için 428da163b831115b.png öğesini tıklayın. Harita görünümünün farklı modlar arasında nasıl değiştiğine dikkat edin.

6fa42970d87f5dc7.png

5. Görev: İşaretçi ekleme

Varsayılan olarak onMapReady() geri çağırması, Google Haritalar'ın oluşturulduğu Sidney, Avustralya'ya bir işaretçi yerleştiren kod içerir. Varsayılan geri çağırma, haritayı Sidney'e kaydırmak için de canlandırır.

Bu görevde, harita kamerasının evinize hareket etmesini sağlar, belirlediğiniz bir seviyeye yakınlaştırır ve oraya bir işaretçi yerleştirirsiniz.

1. Adım: Evinizi yakınlaştırın ve işaretçi ekleyin

  1. MapsActivity.kt dosyasında onMapReady() yöntemini bulun. İşaretçiyi Sydney'e yerleştiren ve kamerayı hareket ettiren kodu kaldırın. Yönteminiz şu anda bu şekilde görünmelidir.
override fun onMapReady(googleMap: GoogleMap) {
   map = googleMap

}
  1. Bu talimatları uygulayarak evinizin enlem ve boylamını öğrenin.
  2. Enlem ve boylam için bir değer oluşturup kayan noktalı değerleri girin.
val latitude = 37.422160
val longitude = -122.084270
  1. homeLatLng adında yeni bir LatLng nesnesi oluşturun. Az önce oluşturduğunuz değerleri homeLatLng nesnesinde iletin.
val homeLatLng = LatLng(latitude, longitude)
  1. Haritada ne kadar yakınlaştırma yapmak istediğinize dair bir val oluşturun. 15f yakınlaştırma düzeyini kullanın.
val zoomLevel = 15f

Yakınlaştırma düzeyi, haritaya ne kadar yakın olduğunuzu kontrol eder. Aşağıdaki liste, her bir yakınlaştırma düzeyinin gösterdiği ayrıntı düzeyi hakkında size fikir verir:

  • 1: Dünya
  • 5: Karalar/kıta
  • 10: Şehir
  • 15: Sokaklar
  • 20: Binalar
  1. map nesnesinde moveCamera() işlevini çağırarak kamerayı homeLatLng konumuna hareket ettirin ve CameraUpdateFactory.newLatLngZoom() ile bir CameraUpdate nesnesi iletin. homeLatLng nesnesini ve zoomLevel öğelerini geçin.
map.moveCamera(CameraUpdateFactory.newLatLngZoom(homeLatLng, zoomLevel))
  1. homeLatLng adresindeki haritaya bir işaretçi ekleyin.
map.addMarker(MarkerOptions().position(homeLatLng))

Son yönteminiz aşağıdaki gibi görünecektir:

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

   //These coordinates represent the latitude and longitude of the Googleplex.
   val latitude = 37.422160
   val longitude = -122.084270
   val zoomLevel = 15f

   val homeLatLng = LatLng(latitude, longitude)
   map.moveCamera(CameraUpdateFactory.newLatLngZoom(homeLatLng, zoomLevel))
   map.addMarker(MarkerOptions().position(homeLatLng))
}
  1. Uygulamanızı çalıştırın. Harita evinize doğru kaydırılmalı, istediğiniz düzeye yakınlaştırılmalı ve evinize bir işaretleyici yerleştirilmelidir.

fc939024778ee76.png

2. Adım: Kullanıcıların uzun tıklama kullanarak işaretçi eklemesine izin verin

Bu adımda, kullanıcı haritadaki bir konuma dokunup basılı tuttuğunda bir işaretçi eklersiniz.

  1. MapsActivity içinde, bağımsız değişken olarak GoogleMap alan ve setMapLongClick() adında bir yöntem saplaması oluşturun.
  2. Harita nesnesine bir setOnMapLongClickListener işleyicisi ekleyin.
private fun setMapLongClick(map:GoogleMap) {
   map.setOnMapLongClickListener { }
}
  1. setOnMapLongClickListener() öğesinde addMarker() yöntemini çağırın. Konumu iletilen LatLng olarak ayarlanmış yeni bir MarkerOptions nesnesi aktarın.
private fun setMapLongClick(map: GoogleMap) {
   map.setOnMapLongClickListener { latLng ->
       map.addMarker(
           MarkerOptions()
               .position(latLng)
       )
   }
}
  1. onMapReady() yönteminin sonunda, map ile setMapLongClick() yöntemini çağırın.
override fun onMapReady(googleMap: GoogleMap) {
   ...
  
   setMapLongClick(map)
}
  1. Uygulamanızı çalıştırın.
  2. Bir konuma işaretçi yerleştirmek için haritaya dokunup basılı tutun.
  3. Ekranın ortasında işaretleyiciye dokunun.

4ff8d1c1db3bca9e.png

3. Adım: İşaretçi için bir bilgi penceresi ekleyin

Bu adımda, işaretleyiciye dokunulduğunda işaretçinin koordinatlarını gösteren bir InfoWindow eklersiniz.

  1. setMapLongClick()setOnMapLongClickListener() uygulamasında snippet için bir val oluşturun. Snippet, başlıktan sonra gösterilen ek metindir. Snippet'iniz bir işaretçinin enlemini ve boylamını görüntüler.
private fun setMapLongClick(map: GoogleMap) {
   map.setOnMapLongClickListener { latLng ->
       // A snippet is additional text that's displayed after the title.
       val snippet = String.format(
           Locale.getDefault(),
           "Lat: %1$.5f, Long: %2$.5f",
           latLng.latitude,
           latLng.longitude
       )
       map.addMarker(
           MarkerOptions()
               .position(latLng)
       )
   }
}
  1. addMarker() ürününde, R.string.dropped_pin dize kaynağı kullanarak işaretçinin title değerini Bırakılan PIN olarak ayarlayın.
  2. İşaretçinin snippet özelliğini snippet olarak ayarlayın.

Tamamlanmış işlev aşağıdaki gibi görünür:

private fun setMapLongClick(map: GoogleMap) {
   map.setOnMapLongClickListener { latLng ->
       // A Snippet is Additional text that's displayed below the title.
       val snippet = String.format(
           Locale.getDefault(),
           "Lat: %1$.5f, Long: %2$.5f",
           latLng.latitude,
           latLng.longitude
       )
       map.addMarker(
           MarkerOptions()
               .position(latLng)
               .title(getString(R.string.dropped_pin))
               .snippet(snippet)
              
       )
   }
}
  1. Uygulamanızı çalıştırın.
  2. Konum işaretçisi bırakmak için haritaya dokunup basılı tutun.
  3. Bilgi penceresini göstermek için işaretçiye dokunun.

63f210e6e47dfa29.png

4. Adım: ÖY işleyicisi ekleyin

Varsayılan olarak, önemli yerler (ÖY'ler) haritada ilgili simgeleriyle birlikte görünür. Önemli yerler arasında parklar, okullar, hükümet binaları ve daha fazlası yer alır. Harita türü normal olarak ayarlandığında, işletmelerin ÖY'leri haritada da görünür. Ticari önemli noktalar; mağazalar, restoranlar ve oteller gibi işletmeleri temsil eder.

Bu adımda, haritaya bir GoogleMap.OnPoiClickListener eklersiniz. Bu tıklama işleyici, kullanıcı bir ÖY'yi tıkladığında haritaya hemen bir işaretleyici yerleştirir. Tıklama işleyicide ÖY adını içeren bir bilgi penceresi de görüntülenir.

  1. MapsActivity içinde, bağımsız değişken olarak GoogleMap alan ve setPoiClick() adında bir yöntem saplaması oluşturun.
  2. setPoiClick() yönteminde, iletilen GoogleMap öğesi için bir OnPoiClickListener ayarlayın.
private fun setPoiClick(map: GoogleMap) {
   map.setOnPoiClickListener { poi ->

   }
}
  1. setOnPoiClickListener() içinde, işaretçi için bir val poiMarker oluşturun .
  2. MarkerOptions ile title öğesini ÖY adına ayarlayıp map.addMarker() kullanarak bir işaretçi olarak ayarlayın.
private fun setPoiClick(map: GoogleMap) {
   map.setOnPoiClickListener { poi ->
       val poiMarker = map.addMarker(
           MarkerOptions()
               .position(poi.latLng)
               .title(poi.name)
       )
   }
}
  1. setOnPoiClickListener() işlevinde, bilgi penceresini hemen göstermek için poiMarker tarihinde showInfoWindow() çağrısı yapın.
poiMarker.showInfoWindow()

setPoiClick() işlevine ilişkin son kodunuz aşağıdaki gibi görünmelidir.

private fun setPoiClick(map: GoogleMap) {
   map.setOnPoiClickListener { poi ->
       val poiMarker = map.addMarker(
           MarkerOptions()
               .position(poi.latLng)
               .title(poi.name)
       )
       poiMarker.showInfoWindow()
   }
}
  1. onMapReady() bittikten sonra setPoiClick() numaralı telefonu arayıp map içinde geçin.
override fun onMapReady(googleMap: GoogleMap) {
   ...

   setPoiClick(map)
}
  1. Uygulamanızı çalıştırdıktan sonra park veya kafe gibi bir ÖY bulun.
  2. Üzerine bir işaretçi yerleştirmek ve ÖY'nin adını bir bilgi penceresinde görüntülemek için ÖY'ye dokunun.

f4b0972c75d5fa5f.png

6. Görev: Haritanızın stilini ayarlayın

Google Haritalar'ı birçok yönde özelleştirerek haritanıza benzersiz bir görünüm ve tarz katabilirsiniz.

MapFragment nesnesini, kullanılabilir XML özelliklerini kullanarak diğer herhangi bir parçayı özelleştirdiğiniz gibi özelleştirebilirsiniz. Ancak bu adımda, GoogleMap nesnesi üzerindeki yöntemleri kullanarak MapFragment öğesinin içeriğinin görünümünü ve tarzını özelleştirirsiniz.

Haritanıza özel bir stil oluşturmak için, haritadaki özelliklerin nasıl görüntüleneceğini belirten bir JSON dosyası oluşturursunuz. Bu JSON dosyasını manuel olarak oluşturmanız gerekmez. Google, haritanızın stilini görsel olarak biçimlendirdikten sonra sizin için JSON oluşturan Haritalar Platformu Stil Sihirbazı'nı sağlar. Bu görevde, haritanın stilini retro bir temayla biçimlendirirsiniz. Diğer bir deyişle, harita klasik renkler kullanır ve siz renkli yollar eklersiniz.

1. Adım: Haritanız için stil oluşturun

  1. Tarayıcınızda https://mapstyle.withgoogle.com/ adresine gidin.
  2. Stil oluştur'u seçin.
  3. Retro'yu seçin.

208b3d3aeab0d9b6.png

  1. Diğer Seçenekler öğesini tıklayın.

4a35faaf9535ee82.png

  1. Yol > seçeneğini belirleyin Dolgu.
  2. Yolların rengini istediğiniz renge (pembe gibi) değiştirin.

92c3293749293a4c.png

  1. Son'u tıklayın.

f1bfe8585eb69480.png

  1. Açılan iletişim kutusundan JSON kodunu kopyalayın ve isterseniz sonraki adımda kullanmak üzere düz metin olarak bir notta saklayın.

3c32168b299d6420.png

2. Adım: Stili haritanıza ekleyin

  1. Android Studio'da, res dizininde bir kaynak dizini oluşturun ve bunu raw olarak adlandırın. JSON kodu gibi raw dizin kaynaklarını kullanırsınız.
  2. res/raw uygulamasında map_style.json adlı bir dosya oluşturun.
  3. Saklanan JSON kodunuzu yeni kaynak dosyasına yapıştırın.
  4. MapsActivity ürününde, onCreate() yönteminin üzerinde bir TAG sınıf değişkeni oluşturun. Bu, günlük kaydı amacıyla kullanılır.
private val TAG = MapsActivity::class.java.simpleName
  1. Ayrıca MapsActivity içinde, GoogleMap değerini alan bir setMapStyle() işlevi oluşturun.
  2. setMapStyle() için try{} bloku ekleyin.
  3. Stilin başarısı için try{} blokunda bir val success oluşturun. (Aşağıdaki yakalama bloğunu eklersiniz.)
  4. try{} blokunda JSON stilini haritaya ayarlayın ve GoogleMap nesnesinde setMapStyle() yöntemini çağırın. JSON dosyasını yükleyen bir MapStyleOptions nesnesi iletin.
  5. Sonucu success adlı kullanıcıya ata. setMapStyle() yöntemi, stil dosyasını ayrıştırma ve stili ayarlamanın başarı durumunu gösteren bir boole döndürür.
private fun setMapStyle(map: GoogleMap) {
   try {
       // Customize the styling of the base map using a JSON object defined
       // in a raw resource file.
       val success = map.setMapStyle(
           MapStyleOptions.loadRawResourceStyle(
               this,
               R.raw.map_style
           )
       )
   }
}
  1. success işlevinin yanlış olduğu için bir if ifadesi ekleyin. Stil başarısız olursa ayrıştırma işleminin başarısız olduğunu belirten bir günlük yazdırın.
private fun setMapStyle(map: GoogleMap) {
   try {
       ...
       if (!success) {
           Log.e(TAG, "Style parsing failed.")
       }
   }
}
  1. Eksik stil dosyası sorununu gidermek için bir catch{} bloğu ekleyin. catch blokunda dosya yüklenemiyorsa bir Resources.NotFoundException atın.
private fun setMapStyle(map: GoogleMap) {
   try {
       ...
   } catch (e: Resources.NotFoundException) {
       Log.e(TAG, "Can't find style. Error: ", e)
   }
}

Tamamlanmış yöntem aşağıdaki kod snippet'i gibi görünmelidir:

private fun setMapStyle(map: GoogleMap) {
   try {
       // Customize the styling of the base map using a JSON object defined
       // in a raw resource file.
       val success = map.setMapStyle(
           MapStyleOptions.loadRawResourceStyle(
               this,
               R.raw.map_style
           )
       )

       if (!success) {
           Log.e(TAG, "Style parsing failed.")
       }
   } catch (e: Resources.NotFoundException) {
       Log.e(TAG, "Can't find style. Error: ", e)
   }
}
  1. Son olarak, GoogleMap nesnenizi ileten onMapReady() yönteminde setMapStyle() yöntemini çağırın.
override fun onMapReady(googleMap: GoogleMap) {
   ...
   setMapStyle(map)
}
  1. Uygulamanızı çalıştırın.
  2. Haritayı normal moduna ayarlarsanız yeni stil, seçtiğiniz renkteki retro tema ve yollarla görünür olmalıdır.

b59d6cb81f02a14f.png

3. Adım: İşaretçinizin stilini belirleyin

Harita işaretçilerinin stil özelliklerini ayarlayarak haritanızı daha da kişiselleştirebilirsiniz. Bu adımda, varsayılan kırmızı işaretçileri daha havalı bir şekilde değiştireceksiniz.

  1. onMapLongClick() yönteminde, varsayılan işaretçiyi kullanmak için oluşturucunun MarkerOptions() öğesine aşağıdaki kod satırını ekleyin, ancak rengi mavi olarak değiştirin.
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))

onMapLongClickListener() artık şu şekilde görünüyor:

map.setOnMapLongClickListener { latLng ->
   // A snippet is additional text that's displayed after the title.
   val snippet = String.format(
       Locale.getDefault(),
       "Lat: %1$.5f, Long: %2$.5f",
       latLng.latitude,
       latLng.longitude
   )
   map.addMarker(
       MarkerOptions()
           .position(latLng)
           .title(getString(R.string.dropped_pin))
           .snippet(snippet)
         .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))
   )
}
  1. Uygulamayı çalıştırın. Uzun tıklamanızın ardından görünen işaretçiler artık mavi gölgelidir. onPoiClick() yöntemine stil eklemediğiniz için ÖY işaretçilerinin hâlâ kırmızı olduğunu unutmayın.

b9916bca3c367e3.png

7. Görev: Bindirme ekleyin

Google haritasını özelleştirmenin bir yolu, haritanın üzerine çizim yapmaktır. Popüler balık tutma yerleri gibi belirli bir konum türünü vurgulamak istediğinizde bu teknik yararlıdır.

  • Şekiller: Haritaya çoklu çizgiler, poligonlar ve daireler ekleyebilirsiniz.
  • GroundOverlay nesneleri: Zemin bindirme, haritaya sabitlenmiş bir görüntüdür. İşaretçilerin aksine, zemin bindirmeleri ekran yerine Dünya yüzeyine dayalıdır. Haritayı döndürmek, yatırmak veya yakınlaştırmak resmin yönünü değiştirir. Zemin bindirmeleri, haritadaki bir alandaki tek bir resmi düzeltmek istediğinizde kullanışlıdır.

Adım: Zemin bindirme ekleyin

Bu görevde evinizin konumuna Android şeklinde bir zemin bindirmesi ekleyeceksiniz.

  1. Bu Android görüntüsünü indirin ve res/drawable klasörünüze kaydedin. (Dosya adının android.png olduğundan emin olun.)

61fabd56a0841b44.png

  1. onMapReady() aracında, kamerayı evinizin konumuna taşımak için aramadan sonra bir GroundOverlayOptions nesnesi oluşturun.
  2. Nesneyi androidOverlay adlı bir değişkene atayın.
val androidOverlay = GroundOverlayOptions()
  1. İndirilen resim kaynağından BitmapDescriptor nesnesi oluşturmak için BitmapDescriptorFactory.fromResource() yöntemini kullanın.
  2. Oluşturulan BitmapDescriptor nesnesini, GroundOverlayOptions nesnesinin image() yöntemine iletin.
val androidOverlay = GroundOverlayOptions()
   .image(BitmapDescriptorFactory.fromResource(R.drawable.android))
  1. İstenen yer paylaşımının metre cinsinden genişliği için bir float overlaySize oluşturun. Bu örnekte, 100f genişliği iyi sonuç verir.

position() yöntemini çağırıp homeLatLng nesnesini ve overlaySize öğesini ileterek GroundOverlayOptions nesnesi için position özelliğini ayarlayın.

val overlaySize = 100f
val androidOverlay = GroundOverlayOptions()
   .image(BitmapDescriptorFactory.fromResource(R.drawable.android))
   .position(homeLatLng, overlaySize)
  1. GoogleMap nesnesinde addGroundOverlay() öğesini çağırın ve GroundOverlayOptions nesnenizi iletin.
map.addGroundOverlay(androidOverlay)
  1. Uygulamayı çalıştırın.
  2. Android görüntüsünü bindirme olarak görmek için zoomLevel değerini 18f olarak değiştirin.

b1b25b0acd6a9807.png

8. Görev: Konum izlemeyi etkinleştirme

Kullanıcılar genellikle mevcut konumlarını görmek için Google Haritalar'ı kullanır. Cihazın konumunu haritanızda görüntülemek için konum verisi katmanını kullanabilirsiniz.

Konum verisi katmanı, haritaya Konumum simgesini ekler.

f317f84dcb3ac3a1.png

Kullanıcı düğmeye dokunduğunda, harita cihazın konumu ortalanır. Cihaz sabitse konum mavi bir nokta, cihaz hareket ediyorsa mavi renkli V şeklinde gösterilir.

Bu görevde konum-veri katmanını etkinleştireceksiniz.

Adım: Konum izinleri isteyin

Google Haritalar'da konum izlemeyi etkinleştirmek için tek bir kod satırı gerekir. Ancak, kullanıcının konum izinlerini verdiğinden emin olmanız gerekir (çalışma zamanı izni modelini kullanarak).

Bu adımda konum izinleri ister ve konum izlemeyi etkinleştirirsiniz.

  1. AndroidManifest.xml dosyasında FINE_LOCATION izninin mevcut olduğunu doğrulayın. Google Haritalar şablonunu seçtiğinizde Android Studio bu izni ekledi.
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  1. MapsActivity ürününde REQUEST_LOCATION_PERMISSION sınıf değişkeni oluşturun.
private val REQUEST_LOCATION_PERMISSION = 1
  1. İzinlerin verilip verilmediğini kontrol etmek için MapsActivity içinde isPermissionGranted() adlı bir yöntem oluşturun. Bu yöntemde, kullanıcının izin verip vermediğini kontrol edin.
private fun isPermissionGranted() : Boolean {
  return ContextCompat.checkSelfPermission(
       this,
      Manifest.permission.ACCESS_FINE_LOCATION) == PackageManager.PERMISSION_GRANTED
}
  1. Uygulamanızda konum izlemeyi etkinleştirmek için MapsActivity içinde, bağımsız değişken kabul etmeyen ve hiçbir şey döndürmeyen enableMyLocation() adlı bir yöntem oluşturun. Dosyada ACCESS_FINE_LOCATION iznini kontrol edin. İzin verilirse, konum katmanını etkinleştirin. Aksi takdirde izin isteyebilirsiniz.
private fun enableMyLocation() {
   if (isPermissionGranted()) {
       map.isMyLocationEnabled = true 
   }
   else {
       ActivityCompat.requestPermissions(
           this,
           arrayOf<String>(Manifest.permission.ACCESS_FINE_LOCATION),
           REQUEST_LOCATION_PERMISSION
       )
   }
}
  1. Konum katmanını etkinleştirmek için onMapReady() geri çağırmasından enableMyLocation() komutunu çağırın.
override fun onMapReady(googleMap: GoogleMap) {
   ...
   enableMyLocation()
}
  1. onRequestPermissionsResult() yöntemini geçersiz kılın. requestCode değerinin REQUEST_LOCATION_PERMISSION değerine eşit olup olmadığını kontrol edin. İşaretliyse bu, iznin verildiği anlamına gelir. İzin verilirse grantResults dizisinin ilk alanında PackageManager.PERMISSION_GRANTED içerip içermediğini de kontrol edin. Bu doğruysa enableMyLocation() numaralı telefonu arayın.
override fun onRequestPermissionsResult(
   requestCode: Int,
   permissions: Array<String>,
   grantResults: IntArray) {
   if (requestCode == REQUEST_LOCATION_PERMISSION) {
       if (grantResults.contains(PackageManager.PERMISSION_GRANTED)) {
           enableMyLocation()
       }
   }
}
  1. Uygulamanızı çalıştırın. Cihazın konumuna erişim isteyen bir iletişim kutusu olmalıdır. Devam edin ve izin verin.

da7e23e00ec762c1.png

Haritada artık mavi bir nokta kullanılarak cihazın mevcut konumu gösteriliyor. Bir konum düğmesi olduğuna dikkat edin. Haritayı konumunuzdan uzaklaştırıp bu düğmeyi tıklarsanız, harita tekrar cihazın konumuna ortalar.

5b12eda7f467bc2f.png

9. Çözüm kodu

Tamamlanmış codelab'in kodunu indirin.

$  git clone https://github.com/googlecodelabs/android-kotlin-geo-maps

Alternatif olarak, depoyu zip dosyası olarak indirebilir, sıkıştırılmış dosyayı açtıktan sonra Android Studio'da açabilirsiniz.

10. Özet

Tebrikler! Bir Android Kotlin uygulamasına Google haritası eklediniz ve stilini ayarladınız.

11. Daha fazla bilgi

Android geliştirici dokümanları:

Referans belgeleri:

12. Sonraki codelab

Bu kurstaki diğer codelab'lerin bağlantıları için Kotlin codelab'lerinde gelişmiş Android açılış sayfasına göz atın.