Google Maps

Google Maps’te belirli bir yere dalga efekti vermek

Bir yanıt bırakın

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""text/javascript">
  7. 	/*
  8. 	  isim  : Google Maps Wave Effect
  9. 	  adres : http://www.yunusyurtturk.com
  10. 	  yazar : Yunus Yurttürk
  11. 	 *///Haritanın başlangıç koordinatı
  12. // Marker'ın koordinatı. Koordinatları global olarak tanımladık ki her yerde kullanabilelim
  13. //Harita Ayarları
  14. "map_canvas"),myOptions);
  15. 		//Haritamızı oluşturduk. Şimdi ziplanacakMarker ve waveEffect 'i oluşturalım
  16. //Harita üzerinde görünecek olan normal Marker
  17. //Koordinatı
  18. 			map: map,   //map üstünde bulunsun
  19. // Dalga efektini oluşturacak olan marker
  20. //Öylesine bir koordinat atadık, başlangıçta nerede olduğu önemli değil çünkü
  21. 			map: map,  //map üstünde bulunsun
  22. // Görünür olmasın
  23. 			icon: 'clickeffect.gif'  //Dalga Efektini oluşturan animasyon. Marker'ımız bu resimdeki gibi olacak
  24. //Dalga efektini oluşturacak olan fonksiyon
  25. //Daha önce waveEffect'i global olarak tanımlamıştık. Burada rahat rahat kullanabiliriz. waveEffect'in koordinatını, "koordinat" olarak ata
  26. //waveEffecti görünür yap
  27. //"koordinat" konumuna zıpla
  28. "waveEffect.setVisible(false)",850);  //850 milisaniye sonra waveEffecti gizle
  29. "initialize()">
  30. 	<div style="float:left; width:500px; height:500px; border:solid 2px #CCC; margin-right:20px;" id="map_canvas"></div>
  31. 	<div style="float:left; width:200px; height:500px;">
  32. 		<button onclick="waveEffectZipla(markerKoordinat);">Dalga Efekti İle Zıpla</button>
  33. 		<button onclick="map.setCenter(markerKoordinat);">Normal Zıpla</button>
  34. 	</div>
  35. </body>
  36. </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.  

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir