Son zamanlarda uğraştığım bir proje var, bu sebeple Google Maps ile sıkça haşır neşir oluyorum. Bu yazımda bugün hazırlamış olduğum bir efektin nasıl yapıldığını anlatacağım. Bu efekti hazırlamamın amacı küçük bir karışıklığı önlemek için oldu. Demoya buradan, dosyalara ise buradan ulaşabilirsiniz.
Problem:
Örneğin harita üstünde dar bir alanda bir çok markerınız(yani işaret, ben marker olarak kullanacağım) olsun. Hazırladığım sistemin, harita ile alakalı olmayan bir kısmında tüm markerlarla ilişkili tuşlar olduğunu düşünelim. Bir tuşa bastığımız anda, haritada bu tuşun ilişkili olduğu marker ‘ın konumuna zıplıyorsunuz. İlk başta da dediğim gibi eğer zıpladığınız konumda dar alanda sık sayıda markerınız var ise, hangi markerın üstüne zıpladığınızı anlayamayabiliyorsunuz.
Çözüm:
Kendimce basit bir çözüm ürettim. Tuşlara basıldıktan sonra, zıplayacağımız konum üzerinde bir dalga efekti oluşturuyorum. Böylece hangi marker‘a zıpladığımız daha kolay anlaşılıyor. Dalga efektini ise hazırladığım basit bir animasyonlu gif sayesinde hallediyorum. Kodları ve resmi aşağıda vereceğim linkten indirebilirsiniz. İlk önce kodları paylaşıyorum. WordPressi yeni kullanmaya başladığım için şu kodları güzelce nasıl paylaşırım bilemiyorum henüz, siz kopyala yapıştır yapıp denersiniz 🙂
Google Maps - Dalga Efekti İle Zıplama
Demoya buradan, dosyalara ise buradan ulaşabilirsiniz.
Kodlar bu kadar. Bir şey daha eklemek gerekirse, waveEffectZipla(koordinat) fonksiyonun parametresi olan koordinat .LatLng tipinde olmak zorunda. Yani siz koordinat parametresi olarak 23.563, 27.32623 şeklinde bir değer girerseniz muhtemelen çalışmayacaktır. Bunun yerine parametre olarak aşağıdaki gibi bir ifade girmelisiniz.
new google.maps.LatLng(23.563,27.32623);