React için Google Haritalar API'sinde Dinamik Post-it'ler

Bir sonraki kişisel projem için ne yapacağımdan emin değildim ama sağlam, özelliklerle dolu bir API'yi entegre etmek istediğimi biliyordum. Google Haritalar ile gittim.

Çok yaygın olarak kullanıldığından, hem Google'dan hem de hizmetlerini uygulayan birçok genç ve kıdemli programcıdan çok sayıda belge ve eğitim bulunmaktadır.

Daha önceki bir projede YouTube Veri API'si ile çalışmıştım, bu nedenle zaten bir geliştirici konsolu kurmuştum ve bir API anahtarı almak için kayıt ve süreç hakkında bilgi sahibiydim. Bu arada, bu adımlar oldukça basit.

Çok az kodlama ve birkaç blogdan bazı yararlı ipuçları ile yeni bir React projesine bir harita ekledim ve bazı özelliklerle denemeler yapmaya başladım. Adım adım kurulum sürecini belgeleyen çok sayıda gönderiye ekleme yapmayacağım - buna değineceğim. Bunun yerine, belirli bir özelliği nasıl genişlettiğimi tartışacağım.

Bu site , Harita bileşenlerinin kurulumu ve uygulanması söz konusu olduğunda React projeleri için harika bir kaynaktır. @react-google-maps/api'yi yükledikten sonra, temel bir harita eklemek için tek yapmanız gereken sırasıyla haritaları yüklemek ve görüntülemek için LoadScript ve GoogleMap bileşenleridir.

Bu kadar kolay. Varsayılan görünümü değiştirmek için buraya yalnızca küçük özelliklerin eklendiğini görebilirsiniz.

Birçok harita tabanlı uygulamanın kullandığı ortak bir özellik, genellikle bir aramanın veya kullanıcı girişinin sonucu olan bir ilgi noktasını belirleyen belirgin kırmızı işaretlerdir. Çoğu özellik gibi, işaretçiler de Google Haritalar ekosisteminin yalnızca küçük bir bölümünü temsil eden birçok yerleşik donanıma sahip bir bileşendir.

Genellikle işaretçilerin yanında, kullanıcı işaretçiyi tıklattığında veya kaydırdığında metin bilgilerini görüntüleyen, InfoWindows olarak bilinen açılır etiketler bulunur. Bu InfoWindows'u daha dinamik hale getirmenin ilginç olacağını düşündüm, her biri işaretçi için bir tür post-it notu gibi davranan kullanıcı girişi ve silme işlemlerine izin verdi.

İşte BaseMapContainer'ımın harita kısmı:

Buradaki her şeye girmeyeceğim, ancak yukarıdaki kod, haritamın varsayılan görünümünü belirliyor - New York City'deki Columbus Circle'ın koordinatlarına sahibim - ve bir kullanıcının işaretçileri bırakması ve ardından harekete geçmesi için işlevsellik yaratıyor onlar üzerinde.

Bir kullanıcı belirli bir İşaretçiyi seçerse, bilgi penceresi, notları silmek ve düzenlemek için bir giriş formu, not listesi ve not bileşeninden oluşan NotesContainer bileşenimi içerir. Ayrıca işaretçinin yerini bir destek olarak geçiyorum, böylece tüm gerekli bilgiler tek bir yerde saklanıyor.

Kaba stili bağışlayın, ancak işte kolay post-it not özelliği iş başında.

API oyununa ilgi duyan veya özelliklerle dolu bir sistemde denemeler yapmak isteyen herkes için Google Haritalar API'si harika bir yerdir.