Google Haritalar Platformu, müşterilerin Gelişmiş İşaretçiler yardımıyla harita işaretçilerinin görsel tasarımını özelleştirerek benzersiz deneyimler geliştirmesine olanak tanır. Bu belgede, müşterilerin bir adım daha ileriye giderek gerçek zamanlı verilere dayanarak dinamik bir şekilde değişen işaretçileri nasıl oluşturabileceğini inceleyeceğiz.
Harita işaretçileri, kullanıcılara zengin harita oluşturma deneyimleri sunmak için yararlı bir araçtır. Boyut, renk 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ı için güncellik hissini koruyacak şekilde harita görselleştirmenin güncellenmesini isteyebilir.
Bu makalede, açıklama amaçlı bir örnek kullanılmıştır: Bir perakende zinciri, kullanıcılara mağazada bekleme sürelerini göstermek için haritadan yararlanmak istemektedir. Ancak aynı mimari daha birçok kullanım alanında kullanılabilir. Aşağıda birkaç fikir daha verilmiştir:
- Otel Odasının 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 için rezervasyon yapmaya teşvik edebilecek önemli bir sinyaldir.
- Park Yeri Durumu: Otoparklar haritası üzerinde, kullanıcılara, geldiklerinde kendilerine yer bulabilecekleri bir yer seçmeleri için güven verin.
- Restoranlar Açık, Yakında ve Kapalı: Restoran arama sonuçlarını gösteren bir haritada, kullanıcıların restorana vardıklarında kapalı olup olmadıklarının farkında olmaları önemlidir.
Dinamik Gelişmiş İşaretçiler Çözümü
Şimdi de dinamik verileri görselleştirmek için gelişmiş işaretçileri kullanarak harita oluşturmayı inceleyelim. Daha önce de bahsedildiği gibi kullanım alanı, kullanıcılar için bekleme sürelerini tahmin edip görselleştirmek üzere ödeme sırası yönetim sistemlerinden yararlanan bir perakende mağazaları zinciridir. Uygulama mimarisi şu şekildedir:
1. Adım - Görsel Deneyimi Tanımlamak İçin Özellikleri Belirleme
İlk adım, kullanıcılara gösterilecek bir veya daha fazla konum özelliği belirlemektir. Bu örnekte tek bir mülk göstermek istiyoruz: her bir mağazadaki mevcut bekleme süresi (dakika cinsinden).
Sonraki adım, harita işaretleyicisinde bekleme süresiyle ilgili görsel açıklama eklemek için karşılık gelen bir veya daha fazla işaretçi özelliği seçmektir. İşaretçi özellikleri listesi, hemen PinElement spesifikasyonunda bulunabilir. 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çeriği (özel HTML işaretçileri gerektirir): Geçerli bekleme süresini dakika cinsinden 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 çok 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 HTTP istekleri (REST) aracılığıyla düzenli olarak istediğimiz bir pull 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 mimarimiz Cloud Functions for Firebase'den faydalanır. Cloud Functions, bu verilere erişip bunları hesaplamak için bir arka uç işlevi tanımlamamıza olanak tanıyor. Web uygulamamıza Firebase kitaplığı da ekledik. Bu sayede HTTP isteği üzerinden Cloud Functions işlevimize erişebildik.
Bir sonraki adım, kullanıcı için verileri güncel tutmaktır. Bunun için, JavaScript setInterval işlevini kullanarak 30 saniyelik zaman aşımına sahip bir zamanlayıcı ayarlıyoruz. Zamanlayıcı her tetiklendiğinde, yukarıda açıklandığı şekilde güncel 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ğı ayrıntılı bir şekilde açıklanmaktadır.
3. Adım - Harita İşaretçileri Oluşturma
Artık haritada stilize edilmiş işaretçileri oluşturmak için Gelişmiş İşaretçileri kullanabiliriz. Gelişmiş işaretçiler, Google Haritalar Platformu Maps JavaScript API 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çileri 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ü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";
Haritada kullanıcılar için güncel bekleme sürelerini görselleştirmek amacıyla artık mevcut bekleme süreleri API'miz kullanılı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 iki alternatif seçeneği ele alıyoruz: Firebase Cloud Messaging ve Websockets. Hangi yaklaşımı seçerseniz seçin, harita aracınızın iyi performans göstermeye devam etmesi için aşağıdaki faktörleri mutlaka 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 bir yaklaşımdır. Bu yaklaşımı kullanarak, bekleme süresi verileri arka uçta her güncellendiğinde harita uygulamasına güncelleme gönderirsiniz. Güncelleme iletileri, işaretçi görünümünü ve içeriğini güncellemeyi amaçlayan bir geri çağırma işlevini tetikler.
Bu mimariyi seçmeden önce dikkat edilmesi gereken noktalardan biri, harita uygulamasını çalıştıran her tarayıcı için kalıcı bir sunucu bağlantısının korunmasını gerektirmesidir. Bu nedenle, çalıştırması daha maliyetli olabilir ve bağlantı sorunları bağlamında daha az güçlü olabilir.
WebSockets
WebSockets, verileri güncel tutmak için push tabanlı başka bir yaklaşımdır. Önceki senaryoya benzer şekilde, arka ucunuz ve 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 benzerdir 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ı ile tarayıcısına ve veri hacmine bağlı olarak bu veri kaynaklarını bağlamanın birkaç yolu vardır. Daha sonra entegre veriler, Gelişmiş İşaretçilerin görünümünü ve tarzını gerçek zamanlı olarak kontrol etmek için kullanılabilir ve kullanıcılar için dinamik bir deneyim sunar.
Sonraki İşlemler
Ek Okumalar:
- İleri Düzey İşaretçiler - Google Geliştirici Merkezi
- Özel HTML ile İşaretçiler Oluşturma
- Cloud Functions for Firebase
- Firebase Cloud Messaging
Katılımcılar
Baş 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