Flutter’da Google Maps Entegrasyonu Ve Rota Çizimi

Published in

Flutter Türkiye

4 min readJul 8, 2021

Herkese selamlar. Bu yazımda Flutter projemize Google Haritalar ile beraber, ekleyebileceğimiz birkaç özelliği ve iki nokta arası mesafeyi nasıl dahil edebileceğimizden bahsedeceğim. İyi okumalar.

Google Maps Entegrasyonu

1) pubspec.yaml Dosyamıza Paketimizi Kuralım

Pub.dev sayfasından google_maps_flutter paketini kullanarak projemize ekleyelim.

2) API Anahtarı Oluşturalım

Şimdiki adımda iOS ve Android için birer API anahtarı oluşturuyoruz.

Android için Google’ın kendi hazırladığı kılavuzu okuyarak adımları tamamlayalım: https://developers.google.com/maps/documentation/android-sdk/get-api-key

API anahtarını oluşturduğumuzda Flutter projemizdeki manifest dosyamıza, </application> etiketinin bir üstüne bu kodu ekleyelim. (android/app/src/main/AndroidManifest.xml)

iOS için ise tekrar Google’ın kılavuzundan faydalanabiliriz:

https://developers.google.com/maps/documentation/ios-sdk/get-api-key

API anahtarını elde ettiğimizde, Flutter projemizdeki delegate dosyamıza eklememiz gerekir. (ios/Runner/AppDelegate.m)

3) Android için minSdk sürümünü güncelleyelim

Google haritalarını kullanabilmek için android klasörünün altında bulunan uygulama bazındaki (android/app) build.gradle dosyasındaki minSdkVersion’ u 20 yapalım.

4) Gerekli API’leri Kullanabilir Hale Getirelim

Google Cloud Platformu’ndan APIs & Services sekmesine girelim ve kullanacağımız API’yi bulmak için library sekmesini açıp kullanacağımız SDK türünü etkinleştirelim.

5) GoogleMap Widget’ını Kuralım

Şimdi Flutter projemizde haritaları çağırabiliriz. Çağırmadan önce Terminal’de flutter clean metoduyla API anahtarı değişikliklerinin uygulandığından emin olalım. Tüm ekranı kaplayacak şekilde Google haritamızı ekleyelim.

Ekranımız açıldığında karşımıza çıkacak olan ilk konumu belirlemek için bir _initialCameraPosition değişkeni tanımlıyorum. Konum değerini enlem ve boylam şeklinde double olarak veriyorum.

onMapCreated: Harita çağırıldığında çalışacak olan metottur. Parametre olarak MapController alır. Kodumuzda harita çağrıldığında MapController’i uygulamamızda kullanabilmek için kendi controller’imiz ile tanımladık.

initialCameraPosition: Kullanılması gerekli olan bir parametredir. Harita açıldığında kuş bakışı mesafeyi ve ilk açılan konumu enlem ve boylam ölçüleriyle girmemizi sağlar.

mapController: Kamera fonksiyonlarını kontrol etmemizi sağlar. Flutter’daki diğer controller’lara da benzer şekilde kullanılır.

Şimdi uygulamamızı çalıştırdığımızda böyle bir görüntü elde etmeliyiz:

Başka Neler Ekleyebiliriz?

Markers

GoogleMap widget’imizin markers paremetresine Marker objesi döndüren bir metot ekliyoruz.

Metodumuzda ise Marker’larımızı oluşturacağımız bir marker listesi oluşturup, içerisinde marker’larımızı tanımlıyoruz. Marker’larımız içinde birçok özellik tanımlayabiliyoruz.

GoogleMap widgetımıza metodumuzu eklemeyi unutmuyoruz.

Marker’ımızın üstüne tıkladığımızda infoWindow’a verdiğimiz değer okunuyor.

Diğer marker’ları biraz uzağa koyduğum için gözükmemiş ama oradalar merak etmeyin, zoom miktarımız yüzünden gözükmüyor.

Harita Görünümünü Değiştirebiliriz

Scaffold’umuza eklediğimiz FloatingActionButton ile haritamıza fonksiyonlar ekleyebiliriz. Örneğin görüntüsünü gerçek moda geçirebiliriz. Değiştirebileceğimiz harita modunu bir değişkene tabi tutalım ki onu sorgulayarak ayarlayabilelim.

Kamera Pozisyonunu Değiştirebiliriz

Yazacağımız küçük bir metot ile kameranın pozisyonunu değiştirebiliriz. Önceden yazmış olduğumuz FloatingActionButton widget’inin onPressed parametresine bu metodu girelim. Ve tıkladığımızda verdiğimiz konuma bizi götürsün.

Rota Çizimi

ÖNEMLİ: Buraya kadar Google’ın bizlere ücretsiz olarak sunduğu SDK’ları sorunsuz bir şekilde kullandık. Bu kısımda kullanacağımız Directions API için ise Google bizden bir fatura ödeme hesabı oluşturmamızı istiyor. Eğer bu hesaba sahipseniz projenizin Billing özelliğini aktif hale getirmeyi unutmayın: https://console.cloud.google.com/billing/projects

Üstteki projemize ekleyerek adım adım ilerleyelim.

1) Gerekli API’yi Aktifleştirelim

Google Cloud Platform’da ilk kısımda yaptığımız gibi Directions API’yı kütüphaneden bulup aktifleştiriyoruz.

2) Gerekli Paketimizi Kuralım

İki nokta arası mesafeyi gösterebilmek için kurmamız gereken bir paketimiz var: https://pub.dev/packages/flutter_polyline_points

3) Koda Geçelim

Daha sonra ayarlayacağımız polyline’ları saklamak için bir değişken tanımlamamız ve bir PolylinePoints nesnesi oluşturmamız gerekiyor. Daha önce tanımladığımız sınıf değişkenlerine ekleyelim.

Başlangıç noktamızın enlem ve boylam değerlerini tutmuştuk. Şimdi de aralığını vereceğimiz hedef noktamızın enlem boylam değerlerini alalım. Marker olarak eklediğimiz noktayı da verebiliriz.

Şimdi, polyline oluşturabilmek için Directions API’sini sorgulamamıza yardımcı olacak bir fonksiyon yazalım.

_getPolyline metodundan bir _addPolyLine metodunu çağırdık, _addPolyLine, haritaları polyline noktalarıyla doldurmamıza yardımcı olacak. Bu metodu da oluşturalım.

Sonrasında body’e verdiğimiz GoogleMap widget’inin polylines parameteresini düzenliyoruz.

Ve son olarak initState metodu içerisinde _getPolyline();diyerek polylinelarımızı aktif hale getiriyoruz.