Google Haritalar Platformu, Gelişmiş İşaretçiler ile harita işaretçilerinin görsel tasarımını özelleştirerek müşterilerin benzersiz deneyimler geliştirmesine olanak tanıyor. Bu dokümanda, müşterilerin nasıl bir adım daha ileri gidip gerçek zamanlı verilere göre dinamik olarak değişen işaretçiler oluşturabileceğini göreceğiz.
Harita işaretçileri, kullanıcılara zengin harita deneyimleri sunmak için yararlı bir araçtır. Boyut, renklendirme ve şekil gibi işaretçi özellikleri, işaretlenen her konumla ilgili ek bilgiler verebilir. Bazı durumlarda, bu ek bilgiler dinamik olarak değişebilir ve geliştirici, harita görselleştirmesinin güncellenmesini, böylece kullanıcı için güncellik düzeyinin korunmasını isteyebilir.
Bu makalede, açıklama amacıyla bir örnek kullanılmaktadır: Bir perakende zinciri, mağazadaki bekleme sürelerini kullanıcılara göstermek için bir harita kullanmak istiyor. Ancak aynı mimari, başka birçok kullanım alanında da kullanılabilir. Aşağıda birkaç ek fikir verilmiştir:
- Otel Odasının Müsaitlik Durumu: Otel arama sonuçlarını gösteren haritada odanın yeniliği, envanter azaldıkça kullanıcıları otel için rezervasyon yapmaya teşvik edebilecek önemli bir işarettir.
- Park Yeri Sayısı: Otoparkların bulunduğu bir haritada, kullanıcıların vardığında kendilerine yer olacak bir hedef seçmeleri için güven verin.
- Açık, Yakında Kapanıyor ve Kapalı Restoranlar: Restoran arama sonuçlarını gösteren bir haritada, kullanıcıların restorana vardıklarında kapalı olabileceğini bilmeleri önemlidir.
Dinamik Gelişmiş İşaretçi Çözümü
Şimdi dinamik verileri görselleştirmek için gelişmiş işaretçiler kullanarak bir harita oluşturma adımlarını inceleyelim. Daha önce de belirtildiği gibi, kullanım alanı kullanıcıların bekleme sürelerini tahmin etmek ve görselleştirmek için ödeme sırası yönetim sisteminden yararlanan bir perakende satış mağazası zinciridir. Uygulama mimarisi şu şekildedir:
1. adım - Görsel deneyimi tanımlayacak özellikleri belirleyin
İlk adım, kullanıcılara gösterilecek bir veya daha fazla konum özelliğini belirlemektir. Bu durumda, yalnızca bir mülkü göstermek istiyoruz: her mağaza konumundaki mevcut bekleme süresi (dakika cinsinden).
Sonraki adım, harita işaretleyicisine bekleme süresine görsel olarak açıklama eklemek için bir veya daha fazla karşılık gelen işaretçi özelliği seçmektir. İşaretçi özelliklerinin listesi, PinElement spesifikasyonunda hazır olarak bulunur. Daha zengin özelleştirme seçenekleri için özel HTML'yi de kullanabilirsiniz.
Bu örnekte, bekleme süresi verilerini görselleştirmek için iki işaretçi özelliği kullanacağız:
- İşaretçi rengi: 5 dakikadan kısa bekleme süresi için mavi, 5 dakikadan uzun süre için sarı
- İşaretçi içeriği (özel HTML işaretçileri gerektirir): Geçerli bekleme süresini dakika cinsinden işaretçiye ekleriz
2. Adım: Gerçek Zamanlı Veri Kaynaklarına Bağlantıyı Yapılandırın
Veri kaynaklarına bağlanmanın birden fazla yolu vardır. Doğru çözüm, kullanım alanınıza ve teknik altyapınıza bağlıdır. Bu örnekte, güncellenen bekleme süresi verilerini düzenli olarak HTTP istekleri (REST) aracılığıyla isteğimiz bir çekme yaklaşımı kullanıyoruz. Aşağıdaki bölümlerde, push yaklaşımlarından yararlanan alternatif mimarileri göreceksiniz.
Uygulamamızın sunucumuzdaki bekleme süresi verilerine erişebilmesi için mimarimizde Cloud Functions for Firebase'den yararlanıyoruz. Cloud Functions, bu verilere erişip hesaplama yapmak için arka uç işlevi tanımlamamızı sağlar. Ayrıca, web uygulamamıza Firebase kitaplığını ekleyerek bir HTTP isteği aracılığıyla Cloud Functions işlevimize erişebiliriz.
Bir sonraki adım, kullanıcı için verileri güncel tuttuğumuzdan emin olmaktır. Bunun için JavaScript setInterval işlevini kullanarak 30 saniyelik zaman aşımı süresi olan bir zamanlayıcı oluşturduk. Zamanlayıcı her tetiklendiğinde, yukarıda açıklandığı gibi güncellenmiş bekleme süresi verilerini isteriz. Yeni verileri aldıktan sonra harita işaretçilerinin görünümünü yenilememiz gerekir. Sonraki adımda bu değişikliklerin nasıl yapılacağı ayrıntılı olarak açıklanmaktadır.
3. Adım - Harita İşaretçileri Oluşturma
Artık harita üzerinde stilize işaretçileri oluşturmak için gelişmiş işaretçileri kullanabiliriz. Gelişmiş işaretçiler, Google Haritalar Platformu'nun Haritalar JavaScript API'si tarafından oluşturulan haritalarda oluşturulabilir. Gelişmiş işaretçileri kullanırken JS harita isteğine harita kimliği parametresini eklediğinizden emin olun.
Aşağıda gösterilen kod snippet'inde işaretçiler oluşturur ve bir HTML div öğesi oluşturarak işaretçinin içeriğini tanımlarız:
// Create the content div for the marker
storeWaitLabels[store_index] = document.createElement("div");
// Create the marker
markers.push(new google.maps.marker.AdvancedMarkerElement({
map,
position: { lat: latlngs[store_index][0], lng: latlngs[store_index][1] },
content: storeWaitLabels[store_index]
}));
Son adım, her mağaza için işaretçi metnini ve CSS stilini güncellemektir. Aşağıdaki kod, güncellenmiş bekleme süresi verilerini okur ve bekleme süresine göre her bir mağaza raptiyesine stil atar:
// Update the visual appearcance of a map marker
storeWaitLabels[store_index].textContent = waitTimes[store_index] + " min";
if (waitTimes[store_index] > 5)
storeWaitLabels[store_index].className = "wait-over-5";
else storeWaitLabels[store_index].className = "wait-under-5";
Harita artık kullanıcılar için güncel bekleme sürelerini görselleştirmek üzere mevcut bekleme süreleri API'mizi kullanıyor:
Gerçek Zamanlı Veri Kaynaklarına Bağlanmanın Alternatif Yöntemleri
Gerçek zamanlı veri kaynaklarına bağlanmanın çeşitli yolları vardır. Aşağıda, Firebase Cloud Messaging ve Websocket'ler olmak üzere iki alternatif seçeneği inceleyeceğiz. Hangi yaklaşımı seçerseniz seçin, harita aracınızın performansını sürdürmesi için aşağıdaki faktörleri göz önünde bulundurun:
- Güncellemelerin sıklığı
- Veri hacmi
- Harita görünümündeki işaretleyici sayısı
- Donanım ve tarayıcı özellikleri
Firebase Cloud Messaging
Firebase Cloud Messaging, push yaklaşımıdır. Bu yaklaşımı kullanarak, arka uçta bekleme süresi verileri her güncellendiğinde harita uygulamasına güncelleme gönderirsiniz. Güncelleme mesajları, işaretçi görünümünü ve içeriğini güncellemek olan bir geri çağırma işlevini tetikler.
Bu mimariyi seçmeden önce dikkate alınması gereken bir nokta, harita uygulamasını çalıştıran her tarayıcı için kalıcı bir sunucu bağlantısı sürdürülmesinin gerekmesidir. Bu nedenle, çalıştırması daha maliyetli olabilir ve bağlantı sorunları açısından daha az sağlam olabilir.
WebSockets
WebSockets, verileri güncel tutmak için kullanılan başka bir push tabanlı yaklaşımdır. Önceki senaryoya benzer şekilde, arka uç ile harita uygulamanız arasında kalıcı bir bağlantı kurmak için WebSocket'leri kullanabilirsiniz. Bu yaklaşımın işlevsel avantajları, Firebase Cloud Messaging'e benzer niteliktedir ancak gerekli altyapıyı yapılandırmak için ek çalışmalar gerekebilir.
Sonuç
Geliştiriciler, Google Haritalar'da sezgisel görselleştirmeler oluşturmak için gerçek zamanlı veri kaynaklarını Gelişmiş İşaretçilerle birleştirebilir. Harita gereksinimlerine, kullanıcı donanımına, tarayıcıya ve veri hacmine bağlı olarak bu veri kaynaklarını bağlamanın birkaç yolu vardır. Entegre veriler daha sonra, gelişmiş işaretçilerin görünümünü ve tarzını anlık olarak kontrol etmek için kullanılabilir. Bu sayede kullanıcılara dinamik bir deneyim sunulur.
Sonraki İşlemler
Daha fazla bilgi:
- Gelişmiş İşaretçileri Kullanma - Google Geliştirici Merkezi
- Özel HTML ile işaretçi oluşturma
- Cloud Functions for Firebase
- Firebase Cloud Messaging
Katkıda bulunanlar
Başlıca yazarlar:
Jim Leflar | Google Haritalar Platformu Çözüm Mühendisi
John Branigan | Google Cloud Platform Kıdemli Müşteri Mühendisi
Steve Barrett | Google Haritalar Platformu Çözüm Mühendisi