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"> </script> <script type="text/javascript"> /* isim : Google Maps Wave Effect adres : http://www.yunusyurtturk.com yazar : Yunus Yurttürk */ function initialize() { baslangicKoordinat = new google.maps.LatLng(40.97704362136498,28.963210717773443); //Haritanın başlangıç koordinatı markerKoordinat = new google.maps.LatLng(41,30); // Marker'ın koordinatı. Koordinatları global olarak tanımladık ki her yerde kullanabilelim var myOptions = { //Harita Ayarları zoom: 8, center: baslangicKoordinat, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); //Haritamızı oluşturduk. Şimdi ziplanacakMarker ve waveEffect 'i oluşturalım ziplanacakMarker = new google.maps.Marker({ //Harita üzerinde görünecek olan normal Marker position: markerKoordinat, //Koordinatı map: map, //map üstünde bulunsun }); waveEffect = new google.maps.Marker({ // Dalga efektini oluşturacak olan marker position: baslangicKoordinat, //Öylesine bir koordinat atadık, başlangıçta nerede olduğu önemli değil çünkü map: map, //map üstünde bulunsun visible: false, // Görünür olmasın icon: 'clickeffect.gif' //Dalga Efektini oluşturan animasyon. Marker'ımız bu resimdeki gibi olacak }); } function waveEffectZipla(koordinat) //Dalga efektini oluşturacak olan fonksiyon { waveEffect.position = koordinat; //Daha önce waveEffect'i global olarak tanımlamıştık. Burada rahat rahat kullanabiliriz. waveEffect'in koordinatını, "koordinat" olarak ata waveEffect.setVisible(true); //waveEffecti görünür yap map.setCenter(koordinat); //"koordinat" konumuna zıpla setTimeout("waveEffect.setVisible(false)",850); //850 milisaniye sonra waveEffecti gizle } </script> </head> <body onload="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.
new google.maps.LatLng(23.563,27.32623);