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 🙂
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="Author" content="Yunus Yurttürk" /> <title>Google Maps - Dalga Efekti İle Zıplama</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false""text/javascript"> /* isim : Google Maps Wave Effect adres : http://www.yunusyurtturk.com yazar : Yunus Yurttürk *///Haritanın başlangıç koordinatı // Marker'ın koordinatı. Koordinatları global olarak tanımladık ki her yerde kullanabilelim //Harita Ayarları "map_canvas"),myOptions); //Haritamızı oluşturduk. Şimdi ziplanacakMarker ve waveEffect 'i oluşturalım //Harita üzerinde görünecek olan normal Marker //Koordinatı map: map, //map üstünde bulunsun // Dalga efektini oluşturacak olan marker //Öylesine bir koordinat atadık, başlangıçta nerede olduğu önemli değil çünkü map: map, //map üstünde bulunsun // Görünür olmasın icon: 'clickeffect.gif' //Dalga Efektini oluşturan animasyon. Marker'ımız bu resimdeki gibi olacak //Dalga efektini oluşturacak olan fonksiyon //Daha önce waveEffect'i global olarak tanımlamıştık. Burada rahat rahat kullanabiliriz. waveEffect'in koordinatını, "koordinat" olarak ata //waveEffecti görünür yap //"koordinat" konumuna zıpla "waveEffect.setVisible(false)",850); //850 milisaniye sonra waveEffecti gizle "initialize()"> <div style="float:left; width:500px; height:500px; border:solid 2px #CCC; margin-right:20px;" id="map_canvas"></div> <div style="float:left; width:200px; height:500px;"> <button onclick="waveEffectZipla(markerKoordinat);">Dalga Efekti İle Zıpla</button> <button onclick="map.setCenter(markerKoordinat);">Normal Zıpla</button> </div> </body> </html>
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.