bildirgec.org

google maps hakkında tüm yazılar

Google Maps Api v3 ile Tıklanan Noktalar Arası Yol Tarifi Alma

admin | 19 October 2010 16:31

Maps api yeni versiyonu ile birçok nesne isimi değişikliğe uğradı. Yani yeni bir kodlama çatısı oluştu. Bu çatı ile yol tarifi alımı birçok projede kullanılabilir. Aşağıda ise basit sayılan bir örnek ile bu özelliği açıklamaya çalışacağım.
Önce apimizi HTML e ekliyoruz.

1
 
<script type="text/javascript" src="http://arsiv.pilli.com/http://maps.google.com/maps/api/js?sensor=true"></script>

Bu arada yeni çatı ile artık alan adınızı kayıt ettirmenize gerek kalmıyor, direk kullanabiliyoruz.
Gerekli kodlar ise şu şekilde

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
var map;

var directionDisplay;

var directionsService;

var stepDisplay;

var clicks=[];



function initialize() { // body elementine onload="initialize()" ile bu fonksiyonu göstererek sayfa açıldığında yüklenmesini sağlayacağız

  directionsService = new google.maps.DirectionsService(); //Bu satır ile yön tarifi hizmetini kullacağımızı belirtiyoruz

  var adimlar;

  var istanbul = new google.maps.LatLng(41.01521967187517, 28.98130334943846);//haritamızın merkezini belitiyoruz

  var myOptions = {

    zoom: 13,

    mapTypeId: google.maps.MapTypeId.ROADMAP,

    center: istanbul

  }

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);//son olarak haritamızı hengi elemana koyacağımızı ve gerekli özellikleri ile birlikte ekrana veriyoruz

  var rendererOptions = { 

    map: map, // hangi haritada çıkacağı

	draggable: true, // oluşturulan çiginin sürüklenbilirmi olacağı

  }

  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions) //yön tarifi için gerekli ayarların bu şekilde veriliyor 

  stepDisplay = new google.maps.InfoWindow();

	google.maps.event.addListener(map, 'click', function(event) {// burada tıklama ile alınan koordinatları bir diziye aktarıyoruz

		if(typeof(clicks[0])=='undefined'){

			 clicks[0]=event.latLng;

		}else{ 

			clicks[1]=event.latLng;

			calcRoute();// eğer ilk tıklama yapılmış ise 2. yide alıp tarifimiz gösteren fonksiyonu çağırıyoruz

		}

	});

}

function calcRoute() {

  var start =clicks[0];

  var end =clicks[1];

  var request = {

      origin: start,

      destination: end,

      travelMode: google.maps.DirectionsTravelMode.WALKING // WALKING DRIVING yada CYCLING 

  };

  directionsService.route(request, function(response, status) {// tarif için gerekli isteğimizi yapıyoruz

    if (status == google.maps.DirectionsStatus.OK){

      directionsDisplay.setDirections(response);

    }

  });

}

Açıklamaları genellikle kod içinde vermeye çalıştım. Harita ve yön tarifi için gerekli ayarları koyduğumuz değişkenlerde, özellik sayısı arttırılabilir. Burada kaynak olarak Apinin kendi sayfası kullanılabilir.
Bu kodlar “head” etiketleri arasına eklendikten sonra “body” taglarımız ise 

1
2
3
 
<body onload="initialize()">

<div id="map_canvas" style="width:80%;height:80%"> </div>

</body>

5 kullanışlı jQuery Uygulaması

angelsdemos | 21 September 2010 14:47

web 2.0‘dan web 3.0‘a geçiş aşamaları, html5 ve css3 gibi farklı dillerin gelişmesi ile web uygulamaları artık tamamen interaktif olabiliyor. Görsel açıdan oldukça verimli ve klasik web’te genelde eklentilerle sağlanan birçok uygulama artık bunlara gerek kalmadan sağlanabiliyor. jQuery kütüphanesinin genişliği ile birçok farklı uygulama yapılabiliyor. Aşağıdaki açık kaynaklı ve tamamen ücretsiz uygulamaları geliştirebilir veya kullanabilirsiniz.
Captify

Captify, resimler için hazırlanan basit fakat kullanışlı bir başlık aracıdır. Bu muhteşem jQuery uygulaması ile web sayfanızdaki tüm imajlara başlık ekleyebilir ve kısa notlarınızı imajların altına yerleştirebilirsiniz. Sadece 2.3kb. boyutundaki bu ufak fakat çok yararlı uygulama ile ziyaretçilerinizi bilgilendirebilir, kullanım kolaylığı sayesinde her projenizde yer verebilirsiniz.

gvChart

Birçok uygulamada başarılı şekilde kullanabileceğiniz gvChart, istatiksel verileri tablo ve şema halinde herhangi bir eklenti kullanmadan web sitenize yansıtmaya yarar. 5 farklı demosunu tamamen özelleştirebilir ve istediğiniz gibi web siteniz ile uyum aşamasına getirebilirsiniz. Farklı renkler seçebilme ve istatiklerde tooltip kullanabilme gibi özellikleri sayesinde oldukça kullanışlı bir uygulama.

Google Streetview arabasını görünce nasıl davranılır?

bteoman | 20 July 2010 17:10

Google Streetview hakkında pek çok şey yazıldı ve söylendi. Peki siz Google Streetview arabasını görseniz nasıl davranırdınız? İşte eğlenceli bir örnek :

Google Streetview
Google Streetview

Türkiyede de böyle bir uygulama yapılsa neler oldurdu merak ediyorum…

dünyaya 8bit bakmak ister misiniz?

tarikozket | 12 July 2010 16:24

Brett Camper adlı bir adamın çalışması olan “The 8-Bit Cities” projesi, ünlü şehirleri Commodore gibi sistemlerden hatırladığımız 8-bit oyunlar gibi bir görünüme kavuşturuyor. Öncelikle New York ile başlamış olan proje, şimdi San Francisco, Amsterdam, Austin, Berlin, Detroit, Londra, New York, Paris, Seattle ve Washington gibi şehirleri de kapsıyor.
Google Maps aracılığıyla seks haritası gibi çok çılgın çalışmalar görmüştük ama bu şimdiye kadarki en garip çalışma diyebiliriz.

haritadan görünüm
haritadan örnek


Denemek isteyenler için projenin sitesi

google ürünleri için 7 Cheat Sheet

ilker efsane | 21 June 2010 11:04

Google hayatımız da bir vazgeçilmez olarak yerini aldı. Bu yazımda bazı google ürünlerinin Cheat Sheet lerini bulabileceğiniz kaynakları yazacağım.

Google
Google

Gmail Cheat Sheet için Burdan ve burdan,
Google Calculator Cheat Sheet için burdan,
Google presentation Cheat Sheet için burdan,
Google Chrome Cheat Sheet için burdan,
Google spreadsheets Cheat Sheet için burdan,
Google Reader Cheat Sheet için Burdan,
Google MapsCheat Sheet için burdan,
faydalanabilirsiniz.