Sunum İçeriği <ul><li>GeoWeb 2.0 nedir? </li></ul><ul><li>Neden Google Maps? </li></ul><ul><li>Google Maps için JavaScript...
Neden Google Maps? <ul><li>Yüksek Çözünürlüklü Uydu Görüntüleri </li></ul><ul><li>Detaylı Yol Haritaları </li></ul><ul><li...
Neden Google Maps? Detaylı Haritalar ve Görüntüler
Neden Google Maps? Adres Bulma (Geocoding) Reverse Geocoding!
Neden Google Maps? <ul><li>Bol Örnek </li></ul><ul><li>Referans Kütüphanesi </li></ul><ul><li>Sunumlar ve Videolar </li></...
Neden Google Maps? <ul><li>http://groups.google.com/group/Google-Maps-API </li></ul><ul><li>http:// mapki.com / </li></ul>...
Neden Google Maps? <ul><li>MarkerManager </li></ul><ul><li>DragZoomControl </li></ul><ul><li>LabeledMarker </li></ul><ul><...
Neden Google Maps? <ul><li>Google Maps API For Flash/Flex </li></ul><ul><li>Google Static Maps API </li></ul><ul><li>Googl...
Sunum İçeriği <ul><li>GeoWeb 2.0 nedir? </li></ul><ul><li>Neden Google Maps? </li></ul><ul><li>Google Maps için JavaScript...
Google Maps için JavaScript <ul><li>JavaScript Nedir? </li></ul><ul><li>Betimleme Dili (Scripting Language) </li></ul><ul>...
Google Maps için Javascript <ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN   &quot;http://www.w3.org/TR/htm...
Google Maps için Javascript <ul><li><script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>  </li></ul><...
Google Maps için Javascript <ul><li>a  =  5 0;  //  global değişken </li></ul><ul><li>var   isim  = ' Alper ';  //  global...
Google Maps için Javascript <ul><li>Sayılar (Numbers)  (x = 345; y = 3.14;) </li></ul><ul><li>Karakter kümesi (String)  </...
Google Maps için Javascript <ul><li>Document Object Model (DOM) ya da diğer objelerin fonksiyon ve özelliklerine erişim iç...
Google Maps için Javascript <ul><li>+, - , *, /, % (Aritmetik operatörler) </li></ul><ul><li>++, -- (Aritmetik operatörler...
Google Maps için Javascript <ul><li>if  ( koşul ya da koşullar ) </li></ul><ul><li>{ </li></ul><ul><li>.... </li></ul><ul>...
Google Maps için Javascript <ul><li>for  ( ilkDeğer ; koşul ; artışDeğeri ) { </li></ul><ul><li>... </li></ul><ul><li>n de...
Google Maps için Javascript <ul><li>while  (koşul) { </li></ul><ul><li>..... </li></ul><ul><li>} </li></ul><ul><li>do  { <...
Google Maps için Javascript <ul><li>function  fonksiyonAdi  ( p 1,  p 2,  p 3) {   // p : parametre </li></ul><ul><li>.......
Google Maps için Javascript <ul><li>Yorumlar </li></ul><ul><li>//     tek satır yorumlar için </li></ul><ul><li>/* ....  ...
Google Maps için Javascript <ul><li>A synchronous  JA vascript  X ML </li></ul><ul><li>Bir programlama dili değildir! </li...
Google Maps için Javascript <ul><li>Notepad++ / Aptana (JS ve HTML için) </li></ul><ul><li>Firefox ve Firebug (Debug için)...
Sunum İçeriği <ul><li>GeoWeb 2.0 nedir? </li></ul><ul><li>Neden Google Maps? </li></ul><ul><li>Google Maps için JavaScript...
Google Maps API Temeller Çalışma Prensibi <ul><li>Döşeme (Tiling) Sistemi üstüne kuruludur. </li></ul><ul><li>Basit olarak...
Google Maps API Temeller “ Tiling” sistemi
Google Maps API Temeller “ Tiling” sistemi
Google Maps API Temeller <ul><li>Başlangıç Noktamız : </li></ul><ul><li>http:// code.google.com/apis/maps / </li></ul><ul>...
Google Maps API Temeller <ul><li>http://localhost/  için anahtar : </li></ul><ul><li>ABQI BBBB Ks6J N 4Ceutf3 X hU Iep WEY...
Google Maps API Temeller İlk Örnek <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3....
Google Maps API Temeller <ul><li>Devam ediyoruz : </li></ul><ul><li>http:// code.google.com/apis/maps/documentation/index....
Google Maps API Temeller <ul><li><div id=&quot;map&quot; style=&quot;width:500px;height:300px&quot;></div> </li></ul>HTML ...
Google Maps API Temeller Kontroller Ref-1 GLargeMapControl GSmallMapControl GSmallZoomControl GScaleControl GMapTypeContro...
Google Maps API Temeller Harita Tipleri ve Erişimleri Ref-2 G_NORMAL_MAP G_SATELLITE_MAP G_HYBRID_MAP G_PHYSICAL_MAP Kulla...
Google Maps API Temeller <ul><li>var lat = 37.926868;  </li></ul><ul><li>var lng = 34.936523;  </li></ul><ul><li>var ilkNo...
Google Maps API Temeller <ul><li>map.zoomIn(); </li></ul><ul><li>map.zoomOut() ; </li></ul><ul><li>map. setZoom( 9); </li>...
Google Maps API Temeller <ul><li>GEvent.addListener(map, &quot;click&quot;, function(overlay,latlng) {  </li></ul><ul><li>...
Google Maps API Temeller <ul><li>var request = GXmlHttp.create(); request.open(&quot;GET&quot;, “ koordinatlar.xml &quot;,...
Sunum İçeriği <ul><li>GeoWeb 2.0 nedir? </li></ul><ul><li>Neden Google Maps? </li></ul><ul><li>Google Maps için JavaScript...
Dinamik ve Statik Veri Gösterme <ul><li>Dinamik veriler Google Maps’in üzerinde nokta, çizgi ya da poligon olarak gösterdi...
Dinamik ve Statik Veri Gösterme Dinamik Veriler - GOverlay GOverlay Arayüzü (Interface) G M arker   GPolyline GInfoWindow ...
Dinamik ve Statik Veri Gösterme <ul><li>var lat = 37.926868;  </li></ul><ul><li>var lng = 34.936523;  </li></ul><ul><li>va...
Dinamik ve Statik Veri Gösterme <ul><li>var nokta1 = new GLatLng(37.326868, 35.936523);  </li></ul><ul><li>var nokta2 = ne...
Dinamik ve Statik Veri Gösterme <ul><li>var nokta1 = new GLatLng(37.326868, 35.936523); </li></ul><ul><li>var nokta2 = new...
Dinamik ve Statik Veri Gösterme <ul><li>map.removeOverlay(balon);  </li></ul><ul><li>map.removeOverlay(cizgi);  </li></ul>...
Dinamik ve Statik Veri Gösterme <ul><li>GEvent.addListener(balon, &quot;click&quot;, function() {  </li></ul><ul><li>balon...
Dinamik ve Statik Veri Gösterme <ul><li>var lisans = new GCopyrightCollection(&quot;(c)&quot;);  </li></ul><ul><li>lisans....
Dinamik ve Statik Veri Gösterme Statik Veriler – Tile Katmanı
Sunum İçeriği <ul><li>GeoWeb 2.0 nedir? </li></ul><ul><li>Neden Google Maps? </li></ul><ul><li>Google Maps için JavaScript...
Geocoding (Adres bulma) <ul><li>geocoder = new GClientGeocoder(); </li></ul><ul><li>.... </li></ul><ul><li>function adresi...
Sunum İçeriği <ul><li>GeoWeb 2.0 nedir? </li></ul><ul><li>Neden Google Maps? </li></ul><ul><li>Google Maps için JavaScript...
Genişleme Paketleri <ul><li>http:// code.google.com/p/gmaps -utility-library/ </li></ul>Genişleme Paketlerine Genel Bakış ...
Sunum İçeriği <ul><li>GeoWeb 2.0 nedir? </li></ul><ul><li>Neden Google Maps? </li></ul><ul><li>Google Maps için JavaScript...
JavaScript Frameworkler ile entegrasyon (YUI/DOJO) <ul><li>Artıları : </li></ul><ul><li>Tarayıcılar arası uyum sorunu yok ...
JavaScript Frameworkler ile entegrasyon (YUI/DOJO) <ul><li>http:// developer.yahoo.com/yui / </li></ul><ul><li>Yahoo taraf...
JavaScript Frameworkler ile entegrasyon (YUI/DOJO) <ul><li>YUI Entegrasyon – Örnek 1 </li></ul><ul><li>YUI Entegrasyon – Ö...
Sunum İçeriği <ul><li>GeoWeb 2.0 nedir? </li></ul><ul><li>Neden Google Maps? </li></ul><ul><li>Google Maps için JavaScript...
Soru ve Cevaplar  Konu ile ilgili Sorular
Soru ve Cevaplar  Sunumun İşlenişi ile İlgili Eleştiriler
Google Maps ve  Kurumsal Mashup Geliştirme <ul><li>İlginiz için teşekkür ederim. </li></ul><ul><li>Alper Dinçer </li></ul>...
Upcoming SlideShare
Loading in …5
×

INET-TR 2008 - Google Maps ve Kurumsal Mashup Geliştirme - 2. Kısım (2/2)

2,459 views

Published on

Bu sunum INET-TR 2008 kapsamında ODTÜ KKM'de 21 Aralık 2008 Pazar günü 10.30-13.30 arası yapılmıştır. Sunumun diğer dosyalarına www.mekansal.com adresinden ulaşabilirsiniz.
--------------------------------------------------------------------
This presentation was presented on 21.12.2008, Sunday, 10.30-13.30 at INET-TR 2008 at CCC-METU. The example files can be downloaded from www.mekansal.com

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,459
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
56
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

INET-TR 2008 - Google Maps ve Kurumsal Mashup Geliştirme - 2. Kısım (2/2)

  1. 1. Sunum İçeriği <ul><li>GeoWeb 2.0 nedir? </li></ul><ul><li>Neden Google Maps? </li></ul><ul><li>Google Maps için JavaScript </li></ul><ul><li>Google Maps API Temeller </li></ul><ul><li>Dinamik ve Statik Veri Gösterme </li></ul><ul><li>Geocoding (Adres bulma) </li></ul><ul><li>Genişleme Paketleri </li></ul><ul><li>JavaScript Frameworkler ile entegrasyon (YUI/DOJO) </li></ul><ul><li>Soru ve Cevaplar </li></ul>
  2. 2. Neden Google Maps? <ul><li>Yüksek Çözünürlüklü Uydu Görüntüleri </li></ul><ul><li>Detaylı Yol Haritaları </li></ul><ul><li>Yükseklik Katmanı </li></ul><ul><li>Adres Bulma Servisi (Geocoding) </li></ul><ul><li>Dökümantasyon </li></ul><ul><li>Topluluk Desteği </li></ul><ul><li>Açık Kaynak Genişleme Paketleri </li></ul>
  3. 3. Neden Google Maps? Detaylı Haritalar ve Görüntüler
  4. 4. Neden Google Maps? Adres Bulma (Geocoding) Reverse Geocoding!
  5. 5. Neden Google Maps? <ul><li>Bol Örnek </li></ul><ul><li>Referans Kütüphanesi </li></ul><ul><li>Sunumlar ve Videolar </li></ul><ul><li>http:// code.google.com/apis/maps / </li></ul>Dökümantasyon
  6. 6. Neden Google Maps? <ul><li>http://groups.google.com/group/Google-Maps-API </li></ul><ul><li>http:// mapki.com / </li></ul><ul><li>http://googlegeodevelopers.blogspot.com/ </li></ul><ul><li>http:// econym.googlepages.com/index.htm </li></ul><ul><li>Çok Yakında : www.mekansal.com  </li></ul>Topluluk Desteği
  7. 7. Neden Google Maps? <ul><li>MarkerManager </li></ul><ul><li>DragZoomControl </li></ul><ul><li>LabeledMarker </li></ul><ul><li>ExtMapTypeControl </li></ul><ul><li>ExtInfoWindow </li></ul><ul><li>MapIconMaker </li></ul><ul><li>MarkerTracker </li></ul><ul><li>http:// code.google.com/p/gmaps -utility-library/ </li></ul>Açık Kaynak Genişleme Paketleri
  8. 8. Neden Google Maps? <ul><li>Google Maps API For Flash/Flex </li></ul><ul><li>Google Static Maps API </li></ul><ul><li>Google Mapplets API </li></ul><ul><li>Google Earth API (JS) </li></ul>Hatırlatma! Sadece JavaScript’le yazmak zorunda değilsiniz!
  9. 9. Sunum İçeriği <ul><li>GeoWeb 2.0 nedir? </li></ul><ul><li>Neden Google Maps? </li></ul><ul><li>Google Maps için JavaScript </li></ul><ul><li>Google Maps API Temeller </li></ul><ul><li>Dinamik ve Statik Veri Gösterme </li></ul><ul><li>Geocoding (Adres bulma) </li></ul><ul><li>Genişleme Paketleri </li></ul><ul><li>JavaScript Frameworkler ile entegrasyon (YUI/DOJO) </li></ul><ul><li>Soru ve Cevaplar </li></ul>
  10. 10. Google Maps için JavaScript <ul><li>JavaScript Nedir? </li></ul><ul><li>Betimleme Dili (Scripting Language) </li></ul><ul><li>Prototip Tabanlı (~Nesne Tabanlı) </li></ul><ul><li>weakly typed </li></ul><ul><li>Java ile isim ve yazım hariç bir benzerlik YOK! </li></ul><ul><li>İstemci tarafında çalışır (Tarayıcılarda) </li></ul>
  11. 11. Google Maps için Javascript <ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> sayfa başlığı </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>..... </li></ul><ul><li>document.write( Merhaba Dünya !'); </li></ul><ul><li>..... </li></ul><ul><li></script> </li></ul><ul><li><noscript> </li></ul><ul><li><p> Tarayıcınız JS desteklemiyor ya da JS kapalı! </p> </li></ul><ul><li></noscript> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>Nerede kullanılır? JavaScript’in çalıştığı kısım
  12. 12. Google Maps için Javascript <ul><li><script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;> </li></ul><ul><li><!– </li></ul><ul><li>..... </li></ul><ul><li>Kod bloğu </li></ul><ul><li>..... </li></ul><ul><li>// --> </script> </li></ul>- <script> de ile başlayabilir - <script type=&quot;text/javascript&quot; src=&quot;hello.js&quot;></script> ile dışarıdan JS dosyası eklenir. Nerede kullanılır?
  13. 13. Google Maps için Javascript <ul><li>a = 5 0; // global değişken </li></ul><ul><li>var isim = ' Alper '; // global değişken </li></ul><ul><li>function deneme (){ </li></ul><ul><li>var test = ' inet-tr '; // yerel değişken </li></ul><ul><li>alert ( ' Kullanıcı İsmi : ' + isim); // global değişkenin içeriği hala geçerli : Alper </li></ul><ul><li>} </li></ul><ul><li>deneme(); </li></ul><ul><li>alert(test); // hata verecektir, çünkü ‘test’ değişkeni yerel olarak tanımlı. </li></ul>Değişkenler
  14. 14. Google Maps için Javascript <ul><li>Sayılar (Numbers) (x = 345; y = 3.14;) </li></ul><ul><li>Karakter kümesi (String) </li></ul><ul><li>(isim = &quot; alper &quot; , soyad = ' dinçer ' ) </li></ul><ul><li>Seriler (Arrays) </li></ul><ul><li>seri1 = [1,2,4,16]; </li></ul><ul><li>seri2 = new Array(1,2,4,16); </li></ul><ul><li>seri3 = new Array[4]; //4 adet yer ayrıldı. </li></ul><ul><li>alert(seri2[3]); // ekrana “16” basacaktır </li></ul>Değişken Tipleri
  15. 15. Google Maps için Javascript <ul><li>Document Object Model (DOM) ya da diğer objelerin fonksiyon ve özelliklerine erişim için “nokta” kullanılır. </li></ul><ul><li>Örn: document.body.style .color = ‘red’ </li></ul>Objelere Erişim
  16. 16. Google Maps için Javascript <ul><li>+, - , *, /, % (Aritmetik operatörler) </li></ul><ul><li>++, -- (Aritmetik operatörler) </li></ul><ul><li>= (Atama operatörü) </li></ul><ul><li>==, !=, >, >=, <, <= (Karşılaştırma op.) </li></ul><ul><li>&&  and , ||  or, !  değil ya da tersi </li></ul><ul><li>+ (karakter eklemek için) </li></ul><ul><li>örn : adsoyad = “ Alper &quot; + &quot; &quot; + “ Dinçer &quot;; </li></ul>Operatörler
  17. 17. Google Maps için Javascript <ul><li>if ( koşul ya da koşullar ) </li></ul><ul><li>{ </li></ul><ul><li>.... </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>.... </li></ul><ul><li>} </li></ul>Koşullar ve Değerlendirme a = “alper”; if ( a == “alper” ) { alert(“değişkenin içeriğinde ” alper ” var”); } else { alert(“değişkenin içeriğinde farklı!”); } i f ( isim == “alper” && soyisim == “dinçer” )
  18. 18. Google Maps için Javascript <ul><li>for ( ilkDeğer ; koşul ; artışDeğeri ) { </li></ul><ul><li>... </li></ul><ul><li>n defa çalışacak kodlar </li></ul><ul><li>... </li></ul><ul><li>} </li></ul>Döngüler for ( i=0 ; i< 5 ; i++ ) { //5 defa çalışacak kodlar alert(i); } // Ekrana 0’dan 4’e kadar sayıları basacak.
  19. 19. Google Maps için Javascript <ul><li>while (koşul) { </li></ul><ul><li>..... </li></ul><ul><li>} </li></ul><ul><li>do { </li></ul><ul><li>..... </li></ul><ul><li>} while (koşul); </li></ul>Döngüler i = 0; while (i < 5) { alert(i); i++; } // Ekrana 0’dan 4’e kadar sayıları basacak.
  20. 20. Google Maps için Javascript <ul><li>function fonksiyonAdi ( p 1, p 2, p 3) { // p : parametre </li></ul><ul><li>.... Çalışacak kodlar .... </li></ul><ul><li>return geriDonecekDeger ; // bu kısım opsiyonel </li></ul><ul><li>} </li></ul>Fonksiyonlar function isimYazdir ( ad , soyad ) { alert(“Ad-Soyad : “ + ad + “ “ + soyad); } function isimDondur ( ad , soyad ) { var adSoyad = ad + “ “ + soyad; return adSoyad; } alert (“Ad-Soyad : “ + isimDondur(“alper”,”dinçer”));
  21. 21. Google Maps için Javascript <ul><li>Yorumlar </li></ul><ul><li>//  tek satır yorumlar için </li></ul><ul><li>/* .... */  birden fazla satır içeren yorumlar için </li></ul><ul><li>Alt satıra geçmek : </li></ul><ul><li>Karakter kaçmak için : ” , ’ , </li></ul>Diğer Elemanlar
  22. 22. Google Maps için Javascript <ul><li>A synchronous JA vascript X ML </li></ul><ul><li>Bir programlama dili değildir! </li></ul><ul><li>Geliştirme tekniğidir </li></ul><ul><li>Eş zamanlı olmayan istemci-sunucu ilişkisi üstüne kuruludur </li></ul><ul><li>XML olması gerekli değildir! </li></ul><ul><li>Örnek : GMail, Google Maps </li></ul>AJAX Nedir?
  23. 23. Google Maps için Javascript <ul><li>Notepad++ / Aptana (JS ve HTML için) </li></ul><ul><li>Firefox ve Firebug (Debug için) </li></ul>Geliştirme Araçları
  24. 24. Sunum İçeriği <ul><li>GeoWeb 2.0 nedir? </li></ul><ul><li>Neden Google Maps? </li></ul><ul><li>Google Maps için JavaScript </li></ul><ul><li>Google Maps API Temeller </li></ul><ul><li>Dinamik ve Statik Veri Gösterme </li></ul><ul><li>Geocoding (Adres bulma) </li></ul><ul><li>Genişleme Paketleri </li></ul><ul><li>JavaScript Frameworkler ile entegrasyon (YUI/DOJO) </li></ul><ul><li>Soru ve Cevaplar </li></ul>
  25. 25. Google Maps API Temeller Çalışma Prensibi <ul><li>Döşeme (Tiling) Sistemi üstüne kuruludur. </li></ul><ul><li>Basit olarak bir önbellekleme metodudur. Kullanıcıya belli ölçek seviyelerinde daha önceden oluşturulmuş haritalar sunularak hız kazanımı sağlanır. </li></ul><ul><li>WGS 84 – Coğrafi Koordinat Sistemi </li></ul>
  26. 26. Google Maps API Temeller “ Tiling” sistemi
  27. 27. Google Maps API Temeller “ Tiling” sistemi
  28. 28. Google Maps API Temeller <ul><li>Başlangıç Noktamız : </li></ul><ul><li>http:// code.google.com/apis/maps / </li></ul><ul><li>1. Adım : Anahtar oluşturmak </li></ul>
  29. 29. Google Maps API Temeller <ul><li>http://localhost/ için anahtar : </li></ul><ul><li>ABQI BBBB Ks6J N 4Ceutf3 X hU Iep WEYhT 5 yXp_ZAY 7 _ufC 2 CFXhHIE 7 NvwkxR 89 Dk5MuQNqh Y Ip MN Ruj4 Q 6 O eolw </li></ul>Anahtar Oluşturmak
  30. 30. Google Maps API Temeller İlk Örnek <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot;/> <title>Google Maps JavaScript API Example</title> <script src=&quot;http://maps.google.com/maps?file=api&amp;v=2&amp;key= api_anahtar &quot; type=&quot;text/javascript&quot;></script> <script type=&quot;text/javascript&quot;> //<![CDATA[ function load() { if ( GBrowserIsCompatible() ) { var map = new GMap2(document.getElementById(&quot;map&quot;)); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } } //]]> </script> </head> <body onload=&quot; load() &quot; onunload=&quot; GUnload() &quot;> <div id=&quot; map &quot; style=&quot;width:500px;height:300px&quot;></div> </body> </html> Haritanın Gösterileceği Kısım Haritayı Başlatır/Bitirir Harita objesini oluşturur Tarayıcı uyumunu kontrol eder Google Maps APIsini ekler
  31. 31. Google Maps API Temeller <ul><li>Devam ediyoruz : </li></ul><ul><li>http:// code.google.com/apis/maps/documentation/index.html </li></ul><ul><li>2. Adım : Haritayı özelleştirmeye başlıyoruz. </li></ul>
  32. 32. Google Maps API Temeller <ul><li><div id=&quot;map&quot; style=&quot;width:500px;height:300px&quot;></div> </li></ul>HTML Özelleştirme Ref-0 <ul><li>HTML </li></ul><ul><li>Resim ve İmajlar </li></ul><ul><li>CSS </li></ul><ul><li>JavaScript </li></ul>
  33. 33. Google Maps API Temeller Kontroller Ref-1 GLargeMapControl GSmallMapControl GSmallZoomControl GScaleControl GMapTypeControl GHierarchicalMapTypeControl GOverviewMapControl Kullanımı : map.addControl(new GSmallZoomControl());
  34. 34. Google Maps API Temeller Harita Tipleri ve Erişimleri Ref-2 G_NORMAL_MAP G_SATELLITE_MAP G_HYBRID_MAP G_PHYSICAL_MAP Kullanımı : map.setMapType(G_HYBRID_MAP);
  35. 35. Google Maps API Temeller <ul><li>var lat = 37.926868; </li></ul><ul><li>var lng = 34.936523; </li></ul><ul><li>var ilkNokta = new GLatLng(lat, lng); </li></ul><ul><li>map.setCenter(ilkNokta, 6); </li></ul><ul><li>map.setCenter(new GLatLng(37.4419, -122.1419), 13); </li></ul>Koordinatlar ve Nokta Oluşturmak http://maps.google.com/?ie=UTF8& ll=37.926868,34.936523 &spn=14.335951,26.806641& z=6 Ref-3 Haritayı oluşturulan noktaya ortalar.
  36. 36. Google Maps API Temeller <ul><li>map.zoomIn(); </li></ul><ul><li>map.zoomOut() ; </li></ul><ul><li>map. setZoom( 9); </li></ul><ul><li>map. panTo( ilkNokta ) ; </li></ul><ul><li>map.setCenter( ilkNokta, 13); </li></ul>Harita ile Kontroller Harici Etkileşim Ref-4 Haritaya 1 seviye yakınlaştırır. Haritadan 1 seviye uzaklaştırır. Haritayı verilen seviyeye (9) yakınlaştırır. Haritayı verilen noktaya taşır. Haritaya verilen nokta ortalayarak, verilen seviyeye yaklaştırır. Kullanımı (HTML içinden) : <a href=&quot;javascript:map.zoomOut();&quot;>Uzaklaş</a>
  37. 37. Google Maps API Temeller <ul><li>GEvent.addListener(map, &quot;click&quot;, function(overlay,latlng) { </li></ul><ul><li>alert(&quot;Haritaya Tıklandı! - Koordinatlar : &quot; + latlng); </li></ul><ul><li>}); </li></ul>Olaylar (Events) ve Etkileşim Oluşturma Ref-5 <ul><li>click(overlay: GOverlay , latlng: GLatLng , overlaylatlng: GLatLng ) </li></ul><ul><li>dblclick(overlay: GOverlay , latlng: GLatLng ) </li></ul><ul><li>movestart() </li></ul><ul><li>move() </li></ul><ul><li>moveend() </li></ul><ul><li>drag() </li></ul>Map Objesinin Olaylarından Birkaçı Dinlenmeye başlayan obje Olay gerçekleştiğinde çalışacak foksiyon Olayı kaldırmak için : GEvent.removeListener ( olayObjesi ) ; Olay Örneği (Google Doc.)
  38. 38. Google Maps API Temeller <ul><li>var request = GXmlHttp.create(); request.open(&quot;GET&quot;, “ koordinatlar.xml &quot;, true); request.onreadystatechange = function() {   if (request.readyState == 4) {     alert(request.responseText);   } } </li></ul><ul><li>request.send(null); </li></ul>AJAX ve Asekron Veri Çekmek <ul><li>Avantajları : </li></ul><ul><li>Arka planda çalıştığı için daha yumuşak geçişler </li></ul><ul><li>Sayfa yenilenmediği için daha az veri transferi </li></ul><ul><li>Masaüstü uygulama kullanıyormuş hissi </li></ul>GDownloadUrl(&quot;koordinatlar.xml&quot;, function(data, responseCode) {   alert(data); }); * Bu sadece “GET” metodu için kullanılır
  39. 39. Sunum İçeriği <ul><li>GeoWeb 2.0 nedir? </li></ul><ul><li>Neden Google Maps? </li></ul><ul><li>Google Maps için JavaScript </li></ul><ul><li>Google Maps API Temeller </li></ul><ul><li>Dinamik ve Statik Veri Gösterme </li></ul><ul><li>Geocoding (Adres bulma) </li></ul><ul><li>Genişleme Paketleri </li></ul><ul><li>JavaScript Frameworkler ile entegrasyon (YUI/DOJO) </li></ul><ul><li>Soru ve Cevaplar </li></ul>
  40. 40. Dinamik ve Statik Veri Gösterme <ul><li>Dinamik veriler Google Maps’in üzerinde nokta, çizgi ya da poligon olarak gösterdiğimiz vektör verilerdir. Bunları dinamik olarak veritabanından ya da diğer dosyalardan çekip kullanabiliriz. </li></ul><ul><li>Statik veriler ise harita gösterim sürecini hızlandırmak için raster ya da vektör veriden daha önceden oluşturulmuş “tile” katmanlarıdır. </li></ul>Dinamik vs Statik Örnek bir “tile” katmanı – Seviye 4
  41. 41. Dinamik ve Statik Veri Gösterme Dinamik Veriler - GOverlay GOverlay Arayüzü (Interface) G M arker GPolyline GInfoWindow GTileLayerOverlay GPolygon
  42. 42. Dinamik ve Statik Veri Gösterme <ul><li>var lat = 37.926868; </li></ul><ul><li>var lng = 34.936523; </li></ul><ul><li>var ilkNokta = new GLatLng(lat, lng); </li></ul><ul><li>var balon = new GMarker(ilkNokta); </li></ul><ul><li>map.addOverlay(balon); </li></ul>Dinamik Veriler - Nokta Ref-6
  43. 43. Dinamik ve Statik Veri Gösterme <ul><li>var nokta1 = new GLatLng(37.326868, 35.936523); </li></ul><ul><li>var nokta2 = new GLatLng(37.926868, 35.036523); </li></ul><ul><li>var nokta3 = new GLatLng(37.026868, 34.536523); </li></ul><ul><li>map.setCenter(nokta1, 7); </li></ul><ul><li>var cizgi = new GPolyline([nokta1, nokta2, nokta3],&quot;#ff0000&quot;, 8 ); </li></ul><ul><li>map.addOverlay(cizgi); </li></ul>Dinamik Veriler - Çizgi Ref-7 GPolyline(latlngs: GLatLng [], color?:String, weight?:Number, opacity?:Number, opts?: GPolylineOptions )
  44. 44. Dinamik ve Statik Veri Gösterme <ul><li>var nokta1 = new GLatLng(37.326868, 35.936523); </li></ul><ul><li>var nokta2 = new GLatLng(37.926868, 35.036523); </li></ul><ul><li>var nokta3 = new GLatLng(37.026868, 34.536523); </li></ul><ul><li>map.setCenter(nokta1, 7); </li></ul><ul><li>var poligon = new GPolygon([nokta1, nokta2, nokta3, nokta1],&quot;#f33f00&quot;, 5, 1, &quot;#ff0000&quot;, 0.2); </li></ul><ul><li>map.addOverlay(poligon); </li></ul>Dinamik Veriler - Poligon Ref-8 GPolygon(latlngs: GLatLng [], strokeColor?:String, strokeWeight?:Number, strokeOpacity?:Number, fillColor?:Number, fillOpacity?:Number, opts?: GPolygonOptions )
  45. 45. Dinamik ve Statik Veri Gösterme <ul><li>map.removeOverlay(balon); </li></ul><ul><li>map.removeOverlay(cizgi); </li></ul><ul><li>map.removeOverlay(poligon); </li></ul><ul><li>ya da </li></ul><ul><li>map.clearOverlays(); </li></ul>Dinamik Veri Silme Ref-9 Tüm noktaları haritadan siler. Dikkat : Katmanlar teker teker silinecek ise katman objelerinin global ya da erişilebilir durumda olması gerekmektedir!
  46. 46. Dinamik ve Statik Veri Gösterme <ul><li>GEvent.addListener(balon, &quot;click&quot;, function() { </li></ul><ul><li>balon.openInfoWindowHtml(&quot;Balon Bilgisi <b>Açıldı!</b>&quot;); </li></ul><ul><li>}); </li></ul><ul><li>GEvent.addListener(cizgi, &quot;click&quot;, function(latlng) { // </li></ul><ul><li>map.openInfoWindowHtml(latlng,'Çizgi Bilgisi <b>Açıldı!</b>'); </li></ul><ul><li>}); </li></ul>Dinamik Veriye Bilgi Ekleme Ref-10 & Ref-11
  47. 47. Dinamik ve Statik Veri Gösterme <ul><li>var lisans = new GCopyrightCollection(&quot;(c)&quot;); </li></ul><ul><li>lisans.addCopyright(new GCopyright('Demo', new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)),0,'INET-TR 2008')); </li></ul><ul><li>var tileKatmanı = new GTileLayer(lisans, 0,21 ); </li></ul><ul><li>tileKatmanı.getTileUrl = function(tile,zoom){return &quot;http://inettr.appspot.com/getTile?layer= il- ilce&tileID=&quot; + zoom + &quot;/&quot; + tile.x + &quot;/&quot; + tile.y +&quot;.png&quot;;}; </li></ul><ul><li>tileKatmanı.isPng = function() { return true;}; </li></ul><ul><li>tileKatmanı.getOpacity = function() { return 0.5; } </li></ul><ul><li>var tileOverlay = new GTileLayerOverlay(tileKatmanı); </li></ul><ul><li>map.addOverlay(tileOverlay); </li></ul>Statik Veriler – Tile Katmanı Ref-12
  48. 48. Dinamik ve Statik Veri Gösterme Statik Veriler – Tile Katmanı
  49. 49. Sunum İçeriği <ul><li>GeoWeb 2.0 nedir? </li></ul><ul><li>Neden Google Maps? </li></ul><ul><li>Google Maps için JavaScript </li></ul><ul><li>Google Maps API Temeller </li></ul><ul><li>Dinamik ve Statik Veri Gösterme </li></ul><ul><li>Geocoding (Adres bulma) </li></ul><ul><li>Genişleme Paketleri </li></ul><ul><li>JavaScript Frameworkler ile entegrasyon (YUI/DOJO) </li></ul><ul><li>Soru ve Cevaplar </li></ul>
  50. 50. Geocoding (Adres bulma) <ul><li>geocoder = new GClientGeocoder(); </li></ul><ul><li>.... </li></ul><ul><li>function adresiBul() { </li></ul><ul><li>var address = document.getElementById(&quot;search&quot;).value; </li></ul><ul><li>geocoder.getLatLng( </li></ul><ul><li>address, </li></ul><ul><li>function(point) { </li></ul><ul><li> if (!point) { </li></ul><ul><li>alert(address + &quot; --> bulunamadi!&quot;); </li></ul><ul><li> } else { </li></ul><ul><li>map.setCenter(point, 16); </li></ul><ul><li>var marker = new GMarker(point); </li></ul><ul><li>map.addOverlay(marker); </li></ul><ul><li>marker.openInfoWindowHtml(address); </li></ul><ul><li> } </li></ul><ul><li>} </li></ul><ul><li>); </li></ul><ul><li>} </li></ul>Adres Sorgusu Ref-13 (gmap2.html) Geocoder’ı tanımlıyoruz Adres sorgusunu textbox’tan alıyoruz Adresi sorguluyoruz Bulunan noktayı haritaya ekliyoruz Reverse Geocoding  gmap3.html
  51. 51. Sunum İçeriği <ul><li>GeoWeb 2.0 nedir? </li></ul><ul><li>Neden Google Maps? </li></ul><ul><li>Google Maps için JavaScript </li></ul><ul><li>Google Maps API Temeller </li></ul><ul><li>Dinamik ve Statik Veri Gösterme </li></ul><ul><li>Geocoding (Adres bulma) </li></ul><ul><li>Genişleme Paketleri </li></ul><ul><li>JavaScript Frameworkler ile entegrasyon (YUI/DOJO) </li></ul><ul><li>Soru ve Cevaplar </li></ul>
  52. 52. Genişleme Paketleri <ul><li>http:// code.google.com/p/gmaps -utility-library/ </li></ul>Genişleme Paketlerine Genel Bakış MarkerManager DragZoomControl LabeledMarker ExtInfoWindow MapIconMaker MarkerTracker
  53. 53. Sunum İçeriği <ul><li>GeoWeb 2.0 nedir? </li></ul><ul><li>Neden Google Maps? </li></ul><ul><li>Google Maps için JavaScript </li></ul><ul><li>Google Maps API Temeller </li></ul><ul><li>Dinamik ve Statik Veri Gösterme </li></ul><ul><li>Geocoding (Adres bulma) </li></ul><ul><li>Genişleme Paketleri </li></ul><ul><li>JavaScript Frameworkler ile entegrasyon (YUI/DOJO) </li></ul><ul><li>Soru ve Cevaplar </li></ul>
  54. 54. JavaScript Frameworkler ile entegrasyon (YUI/DOJO) <ul><li>Artıları : </li></ul><ul><li>Tarayıcılar arası uyum sorunu yok </li></ul><ul><li>Hazır araçları var </li></ul><ul><li>Geniş dökümantasyon, örnek ve desteğe sahipler </li></ul><ul><li>Arayüz konusunda standartlara uygunlar </li></ul><ul><li>Eksileri : </li></ul><ul><li>Dosya boyutu olarak çok yüksek </li></ul><ul><li>Tembelliğe alıştırıyorlar  </li></ul>Neden JS Frameworkler?
  55. 55. JavaScript Frameworkler ile entegrasyon (YUI/DOJO) <ul><li>http:// developer.yahoo.com/yui / </li></ul><ul><li>Yahoo tarafından geliştiriliyor (BSD lisans) </li></ul>Yahoo User Interface (YUI) <ul><li>http:// dojotoolkit.org / </li></ul><ul><li>Açık Kaynak </li></ul><ul><li>Topluluk tarafından geliştiriliyor </li></ul>The DOJO Toolkit (DOJO)
  56. 56. JavaScript Frameworkler ile entegrasyon (YUI/DOJO) <ul><li>YUI Entegrasyon – Örnek 1 </li></ul><ul><li>YUI Entegrasyon – Örnek 2 </li></ul><ul><li>DOJO Entegrasyon – Örnek 1 </li></ul>Örnekler
  57. 57. Sunum İçeriği <ul><li>GeoWeb 2.0 nedir? </li></ul><ul><li>Neden Google Maps? </li></ul><ul><li>Google Maps için JavaScript </li></ul><ul><li>Google Maps API Temeller </li></ul><ul><li>Dinamik ve Statik Veri Gösterme </li></ul><ul><li>Geocoding (Adres bulma) </li></ul><ul><li>Genişleme Paketleri </li></ul><ul><li>JavaScript Frameworkler ile entegrasyon (YUI/DOJO) </li></ul><ul><li>Soru ve Cevaplar </li></ul>
  58. 58. Soru ve Cevaplar Konu ile ilgili Sorular
  59. 59. Soru ve Cevaplar Sunumun İşlenişi ile İlgili Eleştiriler
  60. 60. Google Maps ve Kurumsal Mashup Geliştirme <ul><li>İlginiz için teşekkür ederim. </li></ul><ul><li>Alper Dinçer </li></ul><ul><li>[email_address] </li></ul>http://groups.google.com/group/cbs-turkiye

×