Quantcast
Channel: Yunus Yurttürk » efekt
Viewing all articles
Browse latest Browse all 4

Google Maps’te belirli bir yere dalga efekti vermek

$
0
0

Google MapsSon 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:

Gmaps Ö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 :)

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <meta name="Author" content="Yunus Yurttürk" />
  5. <title>Google Maps - Dalga Efekti İle Zıplama</title>
  6. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
  7. </script>
  8. <script type="text/javascript">
  9. /*
  10. isim : Google Maps Wave Effect
  11. adres : http://www.yunusyurtturk.com
  12. yazar : Yunus Yurttürk
  13. */
  14. function initialize()
  15. {
  16. baslangicKoordinat = new google.maps.LatLng(40.97704362136498,28.963210717773443); //Haritanın başlangıç koordinatı
  17. markerKoordinat = new google.maps.LatLng(41,30); // Marker'ın koordinatı. Koordinatları global olarak tanımladık ki her yerde kullanabilelim
  18. var myOptions = { //Harita Ayarları
  19. zoom: 8,
  20. center: baslangicKoordinat,
  21. mapTypeId: google.maps.MapTypeId.ROADMAP
  22. };
  23. map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
  24. //Haritamızı oluşturduk. Şimdi ziplanacakMarker ve waveEffect 'i oluşturalım
  25.  
  26. ziplanacakMarker = new google.maps.Marker({ //Harita üzerinde görünecek olan normal Marker
  27. position: markerKoordinat, //Koordinatı
  28. map: map, //map üstünde bulunsun
  29. });
  30.  
  31. waveEffect = new google.maps.Marker({ // Dalga efektini oluşturacak olan marker
  32. position: baslangicKoordinat, //Öylesine bir koordinat atadık, başlangıçta nerede olduğu önemli değil çünkü
  33. map: map, //map üstünde bulunsun
  34. visible: false, // Görünür olmasın
  35. icon: 'clickeffect.gif' //Dalga Efektini oluşturan animasyon. Marker'ımız bu resimdeki gibi olacak
  36. });
  37.  
  38. }
  39. function waveEffectZipla(koordinat) //Dalga efektini oluşturacak olan fonksiyon
  40. {
  41. waveEffect.position = koordinat; //Daha önce waveEffect'i global olarak tanımlamıştık. Burada rahat rahat kullanabiliriz. waveEffect'in koordinatını, "koordinat" olarak ata
  42. waveEffect.setVisible(true); //waveEffecti görünür yap
  43. map.setCenter(koordinat); //"koordinat" konumuna zıpla
  44. setTimeout("waveEffect.setVisible(false)",850); //850 milisaniye sonra waveEffecti gizle
  45. }
  46. </script>
  47. </head>
  48. <body onload="initialize()">
  49. <div style="float:left; width:500px; height:500px; border:solid 2px #CCC; margin-right:20px;" id="map_canvas"></div>
  50. <div style="float:left; width:200px; height:500px;">
  51. <button onclick="waveEffectZipla(markerKoordinat);">Dalga Efekti İle Zıpla</button>
  52. <button onclick="map.setCenter(markerKoordinat);">Normal Zıpla</button>
  53. </div>
  54. </body>
  55. </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.

  1. new google.maps.LatLng(23.563,27.32623);

Viewing all articles
Browse latest Browse all 4

Latest Images