Merhaba arkadaşlar ;

Bugün her websitesinin olmazsa olmazı krokiler için aslında klasik bir fotoğraf yeterli oluyordu.Ancak son zamanlar Flash krokiler ve interaktif açıklamaları yol tarifleri gayet sık kullanılır oldu. Bende eskiden böyle bir uygulamayı tavsiye ederek anlatmıştım , aslında gayet basit.

http://ercanaltug.blogspot.com/2007/07/web-grafik-flash-proje-1.html

Flash krokilerin ötesinde yine tercih edilen Google Maps ile Uydu Krokiler. Google Earth'ten aldığınız bir fotoğrafı da ekleyenler var ancak asıl Earth'ten aldığınız koordinat bilgilerini aşağıdaki gibi sayfanıza ekleyerek ziyaretçini istediği yerden gelişi görmesini de interaktif olarak sağlayabiliyoruz ve arkada sadece Google Maps dosyaları geliyor.

http://maps.google.com

Bu uygulamayı yapabilmek için herhangi bir noktanın koordinatlarını öğrenmek gerekiyor.Bunun içinde Google Earth programına başvuracağız.Yüklemek için :

http://earth.google.com

Google Earth çok güzel bir programdır kesinlikle kendi evinizi,işinizi,tatil yerlerini ve hatta yurtdışını gezin.Krokimiz için ise göstermek istediğiniz noktayı aşağıdaki gibi raptiyelerek daha sonra enlem boylam parametreleri almak için tools/ options/ 3d view / show lat/long -> diyerek "universal transverse mercator" seçili olduğundan emin olmalıyız.daha sonra places bölümünde bulduğunuz yere, sağ klik / properties. Karşınıza lat/long parametreleri, desimal değerler olarak çıkacaktır.Mesela altta gösterdiğim gibi şuan bu yazıyı yazdığım BilgeAdam / Beşiktaş şubesini seçerek onun koordinatlarını alıyorum.

41.044711°
29.006947°

Ancak bu koordinatlar bana alttaki sırada lazım olacak.Ayrıca eğer 2 noktayı işaretlemeniz gerekirse aynı aşağıdaki gibi noktalı virgül ile ayırarak yazıyoruz.

41.044711,29.006947


Bu koordinatları eğer Google Maps'te Search kısmına yazıp alltaki gibi gelen yerden bir iframe linkini alarak ilk Uydu Krokinizin kodlarını kopyalamış olursunuz.

Haritanın sağ üst tarafında yer alan "Map, Satellite ve Hybrid" linkleri aracılığı ile görüntüyü, -isimlerinden de anlaşılabileceği gibi- harita, uydu görüntüsü ya da birleşik olarak izleyebilirsiniz




Ancak açılan balonda şirketin adını,telefon bilgilerini ve adresini de eklemek hatta logosunu da çıkarmak mümkün ancak bunun için html kodlarını değiştrimeniz gerekiyor. Örnek uygulamam :
http://ercanaltug.googlepages.com/uydu_kroki3.html

Burada önemli olan altta kodları açıkladığım gibi head tagleri arasına google'ın sağladığı javascript kodlarını göstermek ve body'deki taglerden marker.openInfoWindowHtml tagine html kodlarınızı,< onload="initialize()" onunload="GUnload()"> gibi body tagine ek metodu,devamında da sahnede bir divisiona büyüklüklerini altta belirtebildiğiniz gibi belirterek çağırıyoruz.< id="map_canvas" style="width: 800px; height: 560px">< /div >


< src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAiYxXlL7mnoq0Yd8g" type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(41.044711,29.006947), 16);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var marker = new GMarker(new GLatLng(41.044711,29.006947));
map.addOverlay(marker);
marker.openInfoWindowHtml("BilgeAdam
Beşiktaş - İSTANBUL");
}
}
< /script >

< onload="initialize()" onunload="GUnload()">
< id="map_canvas" style="width: 800px; height: 560px">< /div >


(Tagleri blogspot okuyup yorumlamaması için açılış tagleri bir boşluk vererek yazdım düzeltmeden çalışmaz arkadaşlar )

Örnek uygulamamı açıp sağ tıklayıp View Source(Kaynağı görüntüle)diyerek gerçek kodları da inceleyebilirsiniz:


http://ercanaltug.googlepages.com/uydu_kroki3.html


Faydalı olması dileğiyle....