Google Maps Platform, müşterilerin Gelişmiş İşaretçiler'i kullanarak harita işaretçilerinin görsel tasarımını özelleştirmesine olanak tanıyarak benzersiz deneyimler geliştirmelerini sağlar. Bu belgede, müşterilerin bir adım daha ileri giderek anlık verilere göre dinamik olarak değişen işaretçiler oluşturma yöntemini ele alacağız.
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 konum hakkında ek bilgiler verebilir. Bazı durumlarda bu ek bilgiler dinamik olarak değişebilir ve geliştirici, kullanıcının güncel kalmasını sağlamak için harita görselleştirmesinin güncellenmesini isteyebilir.
Bu belgede, açıklayıcı bir örnek kullanıyoruz: Bir perakende zinciri, mağaza bekleme sürelerini kullanıcılara sunmak için harita kullanmak istiyor. Ancak bu mimari, diğer birçok kullanım alanı için de kullanılabilir. Aşağıda birkaç ek fikir verilmiştir:
- Otel Odası Müsaitliği: Otel arama sonuçlarını gösteren bir haritada, oda müsaitliğinin güncelliği, envanter azaldıkça kullanıcıları otel rezervasyonu yapmaya teşvik edebilecek önemli bir sinyaldir.
- Park yeri durumu: Otoparkların haritasında, kullanıcıların varışta park yeri bulabilecekleri bir hedef seçmelerini sağlar.
- Açık, kısa süre içinde kapanacak ve kapalı restoranlar: Restoran arama sonuçlarını gösteren bir haritada, kullanıcıların vardıklarında restoranın kapalı olabileceği konusunda bilgilendirilmesi önemlidir.
Dinamik Gelişmiş İşaretçiler Çözümü
Dinamik verileri görselleştirmek için gelişmiş işaretçiler kullanarak bir harita oluşturabilirsiniz. Daha önce 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ğazaları zinciridir. Uygulama mimarisi şöyledir:
1. adım: Görsel deneyimi tanımlayacak özellikleri belirleyin
İlk adım, kullanıcılara gösterilecek bir veya daha fazla konum özelliği belirlemektir. Bu durumda, yalnızca bir özellik göstermek istiyoruz: her mağaza konumundaki mevcut bekleme süresi (dakika cinsinden).
Bir sonraki adım, harita işaretleyicisindeki bekleme süresini görsel olarak açıklamak için bir veya daha fazla ilgili işaretleyici özelliği seçmektir. İşaretçi özelliklerinin listesi, PinElement spesifikasyonunda kullanıma hazırdır. Daha kapsamlı ö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): Mevcut 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 ve doğru çözüm, kullanım alanınıza ve teknik altyapınıza bağlıdır. Bu örnekte, düzenli olarak HTTP istekleri (REST) kullanarak güncellenmiş bekleme süresi verilerini istediğimiz bir çekme yaklaşımı kullanıyoruz. Aşağıdaki bölümlerde, push yaklaşımlarından yararlanan alternatif mimariler gösterilmektedir.
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ş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ı da dahil ediyoruz. Bu sayede, HTTP isteği kullanarak Cloud Function'ımıza erişebiliyoruz.
Bir sonraki adım, kullanıcı için verilerin güncel kalmasını sağlamaktır. Bunu yapmak için 30 saniyelik zaman aşımıyla JavaScript setInterval işlevini kullanarak bir zamanlayıcı ayarlıyoruz. Zamanlayıcı her tetiklendiğinde, yukarıda açıklandığı gibi güncellenmiş bekleme süresi verileri istenir. 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şturun
Artık haritada stilize edilmiş işaretçileri oluşturmak için gelişmiş işaretçileri kullanabiliriz. Gelişmiş işaretçiler, Google Haritalar Platformu'nun Maps JavaScript API'si ile 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şturulur ve bir HTML div öğesi oluşturularak işaretçinin içeriği tanımlanır:
// 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üreleri verilerini okur ve bekleme süresine göre her mağaza işaretçisine 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:
Anlık 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 WebSocket olmak üzere iki alternatif seçeneği inceliyoruz. 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ıdı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 amacıyla 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ının sürdürülmesinin gerekmesidir. 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 uçunuz 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ışmalar yapılması 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 ve tarayıcısına, veri hacmine bağlı olarak bu veri kaynaklarını bağlamanın çeşitli yolları 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ılar dinamik bir deneyim yaşayabilir.
Sonraki İşlemler
Daha fazla bilgi:
- Gelişmiş İşaretçiler - Google Geliştirici Merkezi
- Özel HTML ile İşaretçiler 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 Sr. Customer Engineer
Steve Barrett | Google Haritalar Platformu Çözüm Mühendisi