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

Sunum İçeriği ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Neden Google Maps? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Neden Google Maps? Detaylı Haritalar ve Görüntüler

Neden Google Maps? Adres Bulma (Geocoding) Reverse Geocoding!

Neden Google Maps? ,[object Object],[object Object],[object Object],[object Object],Dökümantasyon

Neden Google Maps? ,[object Object],[object Object],[object Object],[object Object],[object Object],Topluluk Desteği

Neden Google Maps? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Açık Kaynak Genişleme Paketleri

Neden Google Maps? ,[object Object],[object Object],[object Object],[object Object],Hatırlatma! Sadece JavaScript’le yazmak zorunda değilsiniz!

Google Maps için JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Google Maps için Javascript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Nerede kullanılır? JavaScript’in çalıştığı kısım

Google Maps için Javascript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],- <script> de ile başlayabilir - <script type="text/javascript" src="hello.js"></script> ile dışarıdan JS dosyası eklenir. Nerede kullanılır?

Google Maps için Javascript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Değişkenler

Google Maps için Javascript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Değişken Tipleri

Google Maps için Javascript ,[object Object],[object Object],Objelere Erişim

Google Maps için Javascript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Operatörler

Google Maps için Javascript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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” )

Google Maps için Javascript ,[object Object],[object Object],[object Object],[object Object],[object Object],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.

Google Maps için Javascript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Döngüler i = 0; while (i < 5) { alert(i); i++; } // Ekrana 0’dan 4’e kadar sayıları basacak.

Google Maps için Javascript ,[object Object],[object Object],[object Object],[object Object],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”));

Google Maps için Javascript ,[object Object],[object Object],[object Object],[object Object],[object Object],Diğer Elemanlar

Google Maps için Javascript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],AJAX Nedir?

Google Maps için Javascript ,[object Object],[object Object],Geliştirme Araçları

Google Maps API Temeller Çalışma Prensibi ,[object Object],[object Object],[object Object]

Google Maps API Temeller “ Tiling” sistemi

Google Maps API Temeller ,[object Object],[object Object],[object Object]

Google Maps API Temeller ,[object Object],[object Object],Anahtar Oluşturmak

Google Maps API Temeller İlk Örnek <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key= api_anahtar " type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if ( GBrowserIsCompatible() ) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } } //]]> </script> </head> <body onload=" load() " onunload=" GUnload() "> <div id=" map " style="width:500px;height:300px"></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

Google Maps API Temeller ,[object Object],HTML Özelleştirme Ref-0 ,[object Object],[object Object],[object Object],[object Object]

Google Maps API Temeller Kontroller Ref-1 GLargeMapControl GSmallMapControl GSmallZoomControl GScaleControl GMapTypeControl GHierarchicalMapTypeControl GOverviewMapControl Kullanımı : map.addControl(new GSmallZoomControl());

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);

Google Maps API Temeller ,[object Object],[object Object],[object Object],[object Object],[object Object],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.

Google Maps API Temeller ,[object Object],[object Object],[object Object],[object Object],[object Object],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="javascript:map.zoomOut();">Uzaklaş</a>

Google Maps API Temeller ,[object Object],[object Object],[object Object],Olaylar (Events) ve Etkileşim Oluşturma Ref-5 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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.)

Google Maps API Temeller ,[object Object],[object Object],AJAX ve Asekron Veri Çekmek ,[object Object],[object Object],[object Object],[object Object],GDownloadUrl("koordinatlar.xml", function(data, responseCode) { alert(data); }); * Bu sadece “GET” metodu için kullanılır

Dinamik ve Statik Veri Gösterme ,[object Object],[object Object],Dinamik vs Statik Örnek bir “tile” katmanı – Seviye 4

Dinamik ve Statik Veri Gösterme Dinamik Veriler - GOverlay GOverlay Arayüzü (Interface) G M arker GPolyline GInfoWindow GTileLayerOverlay GPolygon

Dinamik ve Statik Veri Gösterme ,[object Object],[object Object],[object Object],[object Object],[object Object],Dinamik Veriler - Nokta Ref-6

Dinamik ve Statik Veri Gösterme ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Dinamik Veriler - Çizgi Ref-7 GPolyline(latlngs: GLatLng [], color?:String, weight?:Number, opacity?:Number, opts?: GPolylineOptions )

Dinamik ve Statik Veri Gösterme ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Dinamik Veriler - Poligon Ref-8 GPolygon(latlngs: GLatLng [], strokeColor?:String, strokeWeight?:Number, strokeOpacity?:Number, fillColor?:Number, fillOpacity?:Number, opts?: GPolygonOptions )

Dinamik ve Statik Veri Gösterme ,[object Object],[object Object],[object Object],[object Object],[object Object],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!

Dinamik ve Statik Veri Gösterme ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Dinamik Veriye Bilgi Ekleme Ref-10 & Ref-11

Dinamik ve Statik Veri Gösterme ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Statik Veriler – Tile Katmanı Ref-12

Dinamik ve Statik Veri Gösterme Statik Veriler – Tile Katmanı

Geocoding (Adres bulma) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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

Genişleme Paketleri ,[object Object],Genişleme Paketlerine Genel Bakış MarkerManager DragZoomControl LabeledMarker ExtInfoWindow MapIconMaker MarkerTracker

JavaScript Frameworkler ile entegrasyon (YUI/DOJO) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Neden JS Frameworkler?

JavaScript Frameworkler ile entegrasyon (YUI/DOJO) ,[object Object],[object Object],Yahoo User Interface (YUI) ,[object Object],[object Object],[object Object],The DOJO Toolkit (DOJO)

JavaScript Frameworkler ile entegrasyon (YUI/DOJO) ,[object Object],[object Object],[object Object],Örnekler

Soru ve Cevaplar Konu ile ilgili Sorular

Soru ve Cevaplar Sunumun İşlenişi ile İlgili Eleştiriler

Google Maps ve Kurumsal Mashup Geliştirme ,[object Object],[object Object],[object Object],http://groups.google.com/group/cbs-turkiye

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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (15)

More from metalalp

More from metalalp (7)

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