Flutter Projelerinde Google Haritalar İşaretleyiciler ve Yol Tarifleri
Herkese merhaba!
Google Haritalar serisinin ikinci makalesine hoş geldiniz. Haritaları Flutter projelerine nasıl entegre edeceğinizi öğrenmek için ilk makaleye göz atabilirsiniz. (Yalnız ilk makale İngilizcedir, Türkçe yeni başlıyorum.) Bu yazımızda aynı projede işaretleyicileri, özel işaretleyicileri ve yönleri inceleyeceğiz.
İşaretleyiciler yani Markers
Günlük hayatta, kullandığımız haritalarda bir yere tıklayıp onu seçtiğimizde, seçtiğimiz noktaya sabitlenmiş küçük bir simge görüyoruz. Haritada restoran, eczane, okul gibi birçok farklı ikonları da görebiliyoruz. Her birine aslında işaretleyici diyoruz ve bu işaretleyicileri haritamıza bu makalede kolayca ekleyeceğiz.
Öncelikle haritamızda nereye işaret koymamız gerektiğini belirlememiz gerekiyor. Ben bu makalede, Verona şehrinde bir yer istiyorum ve o yerin koordinatlarını kopyalıyorum. Google Haritalar’a sağ tıklayarak istediğiniz yerin koordinatlarını kolaylıkla görebilirsiniz.
google_maps_flutter kütüphanesindeki Marker sınıfından bir değişken tanımlıyoruz. Bu sınıfta markerId, konum ve infoWindow parametrelerini aşağıdaki koddaki gibi dolduruyoruz.
infoWindow parametresinde bir işaretçiye basılı tuttuğumuzda görünen metni gösteririz.
Şimdi tanımladığımız işaretleyiciyi haritamıza ekleme zamanı geldi.
Gördüğümüz gibi haritamıza basit bir işaretçi ekledik. Peki bu markerin ikonunu değiştirmek istiyorsak bunu nasıl yapacağız?
Çok kolay, önce ne yapacağımıza karar vereceğiz. İster ikon olsun, ister görsel, ister başka bir şey olsun seçiyoruz. Bu örnek için aşağıdaki üç resmi kullanacağım.
Ekleyeceğimiz görselleri pubspec.ymal’e eklemeyi unutmayalım.
Resim kullanırken dikkat etmemiz gereken noktalardan biri resmin boyutudur. Görselin boyutunu farklı şekillerde dilediğiniz gibi ayarlayabilirsiniz. Bu örnekte görüntüyü bayt kullanarak ölçeklendireceğiz. Bunu yapmak için BitmapDescriptor sınıfından değişkenleri tanımlayarak başlıyoruz.
Yukarıda tanımladığımız ikonları BitmapDescriptor.fromBytes kullanarak istediğimiz görsele atayacağız. Bunu yapmak için Uint8List formatına ihtiyacımız var. Bunun için getBytesFromAsset fonksiyonunu yazıyoruz. Burada dönüştürme sırasında görüntünün genişliğini ve uzantısını da seçebiliyoruz.
Artık Marker sınıfında kullanarak özelleştirilmiş işaretçilerimizi haritamıza ekleyebiliriz.
Bu şekilde tüm markerleri haritamıza eklediğimizde aşağıdaki gibi bir görüntü bizi bekliyor.
Yol Tarifi
Bir yerden başka bir yere giderken yol tarifi almak için çoğunlukla haritaları kullanırız. Ve bunu Flutter ile göstermek de bir o kadar eğlenceli. Hadi başlayalım!
Başlangıçta yön için 2 noktanın koordinatlarına ihtiyacımız var, ve haritalarda yol tarifleri için kullanılan Polyline sınıfından bir polyline tanımlarız.
Google Haritalar Yol Tarifi API’sinin aktif olup olmadığını kontrol etmenizde fayda var. Çünkü bu API’yi aktif olarak kullanacağız. API’yi kullanırken aldığımız api-key’i yerel dosyamıza kaydetmek için ek bir paket önerebilirim. Bu örnekte onu kullanacağım.
flutter_dotenv
İki nokta arasındaki yolu bulmak için Google’a sormamız gerekiyor ve bunun için iki noktanın koordinatlarını api-key’imiz ile Google Haritalar’a gönderiyoruz. Google Haritalar da bir yanıt verir. Bu sonucu ihtiyaçlarımıza göre dönüştürüp kullanıyoruz. Çünkü başka veriler de gönderiyor.
Yolu çizmek için birçok yol göndermiş olabilir. İki nokta arasında tek bir yol yoktur. Bu örnekte ilk veriyi göstereceğiz. Google Haritalar’ın gönderdiği genel overview_polyline değerini doğrudan kullanamıyoruz, değeri dönüştürüp haritada gösterebileceğimiz değişkenimize ekliyoruz.
Ayrıca çizilen yolun rengi, kalınlığı gibi bazı özelleştirmeler de yapmak mümkündür.
Herhangi bir özel durum yoksa bir poly’nin kodunu çözmek her zaman aynıdır, doğrudan aşağıdaki kodu kullanabilirsiniz.
Dilersek bu isteği Postman’da çalıştırıp yanıtı doğrudan da inceleyebiliriz.
Sonuç olarak haritamızda Floransa’dan Venedik’e mor bir yön çizildiğini görebiliyoruz.
