Google Haritalar Platformu, müşterilerin Gelişmiş İşaretçiler kullanarak harita işaretçilerinin görsel tasarımını özelleştirmesine ve benzersiz deneyimler geliştirmesine olanak tanır. Bu belgede, müşterilerin bir adım daha ileri giderek gerçek zamanlı verilere göre dinamik olarak değişen işaretçileri nasıl oluşturabileceğini inceleyeceğiz.
Harita işaretçileri, kullanıcılara zengin harita deneyimleri sunmak için kullanışlı bir araçtır. Boyut, renklendirme ve şekil gibi işaretçi özellikleri, işaretlenen her konum hakkında ek bilgi verebilir. Bazı durumlarda bu ek bilgiler dinamik olarak değişebilir ve geliştirici, harita görselleştirmesinin güncellenmesini isteyerek kullanıcıya güncel bir deneyim sunabilir.
Bu dokümanda, açıklama amacıyla bir örnek kullanıyoruz: Bir perakende zinciri, mağaza bekleme sürelerini kullanıcılara sunmak için bir harita kullanmak istiyor. Ancak bu mimari, başka birçok kullanım alanı için de kullanılabilir. Aşağıda birkaç fikir daha verilmiştir:
- Otel Odası Müsaitlik Durumu: Otel arama sonuçlarını gösteren bir haritada, oda müsaitlik durumunun güncelliği, envanter azaldıkça kullanıcıları otel rezervasyonu yapmaya teşvik edebilecek önemli bir sinyaldir.
- Park Yeri Kullanılabilirliği: Otopark haritasında kullanıcılara, vardıklarında kendileri için yer olacak bir hedef seçme konusunda güven verin.
- Açık, Yakında Kapanacak ve Kapalı Restoranlar: Restoran arama sonuçlarını gösteren bir haritada, kullanıcıların bir restoranın vardıklarında kapalı olabileceğini bilmesi önemlidir.
Dinamik Gelişmiş İşaretçiler Çözümü
Dinamik verileri görselleştirmek için gelişmiş işaretçileri kullanarak bir harita oluşturabilirsiniz. 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 mağaza 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 mülkü belirlemektir. Bu durumda, yalnızca bir özellik göstermek istiyoruz: her mağaza konumundaki mevcut bekleme süresi (dakika cinsinden).
Sonraki adımda, harita işaretçisindeki bekleme süresini görsel olarak açıklamak için bir veya daha fazla ilgili işaretçi özelliği seçilir. İşaretçi özelliklerinin listesi, PinElement spesifikasyonunda kullanıma hazır olarak sunulur. Daha zengin özelleştirme seçenekleri için özel HTML 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 bekleme süresi için sarı
- İşaretçi içerikleri (özel HTML işaretçileri gerektirir): Dakika cinsinden mevcut bekleme süresini işaretçinin kendisine ekleyeceğiz.
2. adım: Gerçek zamanlı veri kaynaklarıyla bağlantıyı yapılandırma
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üncellenmiş bekleme süresi verilerini düzenli olarak HTTP istekleri (REST) kullanarak istediğimiz bir çekme yaklaşımı kullanıyoruz. İlerleyen bölümlerde, push yaklaşımlarından yararlanan alternatif mimarileri göreceksiniz.
Uygulamamızın, sunucumuzdaki bekleme süresi verilerine erişebilmesi için mimarimiz Cloud Functions for Firebase'den yararlanır. Cloud Functions, bu verilere erişmek ve bunları hesaplamak için bir arka uç işlevi tanımlamamıza olanak tanır. Ayrıca web uygulamamıza Firebase kitaplığını ekleyerek HTTP isteğiyle Cloud Functions işlevimize erişebiliyoruz.
Bir sonraki adım, kullanıcı için verilerin güncel kalmasını sağlamaktır. Bunun için JavaScript setInterval işlevini kullanarak 30 saniyelik bir zaman aşımı süresiyle zamanlayıcı ayarlıyoruz. 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. Bir sonraki adımda bu değişikliklerin nasıl yapılacağı açıklanmaktadır.
3. adım: Harita işaretçilerini oluşturma
Artık haritada stilize edilmiş işaretçileri oluşturmak için Gelişmiş İşaretçiler'i kullanabiliriz. Gelişmiş işaretçiler, Google Haritalar Platformu'nun Maps 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çileri oluşturuyor ve bir HTML div öğesi oluşturarak işaretçinin içeriğini tanımlıyoruz:
// 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üncellenen bekleme süresi verilerini okur ve bekleme süresine göre her 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, kullanıcılar için güncel bekleme sürelerini görselleştirmek amacıyla mevcut bekleme süreleri API'mizi kullanıyor:
Gerçek Zamanlı Veri Kaynaklarına Bağlanmanın Alternatif Yolları
Gerçek zamanlı veri kaynaklarına bağlanmanın çeşitli yolları vardır. Aşağıda, Firebase Cloud Messaging ve Websockets olmak üzere iki alternatif seçeneği inceleyeceğiz. Hangi yaklaşımı seçerseniz seçin, harita aracınızın performansını korumak için aşağıdaki faktörleri göz önünde bulundurun:
- Güncelleme sıklığı
- Veri hacmi
- Harita görünümündeki işaretçi sayısı
- Donanım ve tarayıcı özellikleri
Firebase Cloud Messaging
Firebase Cloud Messaging, push yaklaşımını kullanır. Bu yaklaşımı kullanarak, arka uçta bekleme süresi verileri her güncellendiğinde harita uygulamasına güncellemeler gönderirsiniz. Güncelleme mesajları, işaretçinin görünümünü ve içeriğini güncellemek için bir geri çağırma işlevini tetikler.
Bu mimariyi seçmeden önce göz önünde bulundurmanız gereken bir nokta, harita uygulamasını çalıştıran her tarayıcı için kalıcı bir sunucu bağlantısı sürdürmeyi gerektirmesidir. Bu nedenle, çalıştırılması daha maliyetli olabilir ve bağlantı sorunları bağlamında 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 ucunuz ile harita uygulamanız arasında kalıcı bir bağlantı kurmak için WebSockets'i kullanabilirsiniz. Bu yaklaşımın işlevsel avantajları, Firebase Cloud Messaging'e benzer. Ancak gerekli altyapıyı yapılandırmak için ek çalışma gerekebilir.
Sonuç
Geliştiriciler, Google Haritalar'da sezgisel görselleştirmeler oluşturmak için gerçek zamanlı veri kaynaklarını Gelişmiş İşaretçiler ile 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 edilen veriler, gelişmiş işaretçilerin görünümünü ve tarzını gerçek zamanlı olarak kontrol etmek için kullanılabilir. Böylece kullanıcılara dinamik bir deneyim sunulur.
Sonraki İşlemler
Daha fazla bilgi:
- Gelişmiş İşaretçiler - Google Developers
- Özel HTML ile işaretçi oluşturma
- Cloud Functions for Firebase
- Firebase Cloud Messaging
Katkıda bulunanlar
Asıl yazarlar:
Jim Leflar | Google Haritalar Platformu Çözüm Mühendisi
John Branigan | Google Cloud Platform Kıdemli Customer Engineer'ı
Steve Barrett | Google Haritalar Platformu Çözüm Mühendisi