GoogleMaps Google’in uydu üzerinden elde ettiği fotoğrafları internet ortamında kullanmasıdır.Bunun için kendine bir API(Application Programming Interface) oluşturmuştur.Geliştiriciler bu api’yi kullanarak istedikleri yeri kolay bir şekilde görüntüleyebilmektedir.Bu kadar google’ reklamı yeter 🙂 Makaleme başlıyorum 🙂
Makale’nin ana konusuna girmeden önce şu linkteki bilgileri okumanızı öneririm.Zira makale içinde kullanacağımız javascript kodlarının ne anlama geldiğini bilmemiz gerekiyor.
http://code.google.com/apis/maps/documentation/reference.html
Burada google’in bize sunduğu api’nin tüm açıklaması yapılmıştır.Ayrıca demo gallery ve examples bölümlerinde örnekler verilmiştir.Ayrıca googlemaps’i kullanabilmemiz için google’dan bir “apikey” elde etmemiz gerekiyor.Onuda buradan elde edebilirsiniz.
http://code.google.com/apis/maps/signup.html
Javascript bilginizin biraz olması gerekiyor.Çünkü tamamıyla client-side olarak çalışan bu api’de çok işimize yaracaktır.Ama biz bunu server-side’a dönüştüreceğiz.(Nasıl yani?)
Google’ın dokümantasyonu inceledikten sonra tamamiyle client-side olan bu api’yi asp.net içerisinde nasıl kullanacağım’ı araştırmaya başladım.Aslında zor olan bir şey yok javascript kodlarını sayfaya koyunca harita yükleniyor ve istediğim sonucu alıyorum.
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById(“map”));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(38.4, 31.5), 5);
}
}
Bu fonksiyonu body tagının onLoad event’ına(<body onLoad=”Load()”) yazınca harita yükleniyor.Bu ne anlama geliyor? Şu anlama geliyor:
if (GBrowserIsCompatible())
{
}
Bu kod browser’ın harita için uyumluluğu kontrol eder.Harita yüklebilir bir browser ise yükler.(Daha fazla bilgi için dökümanlara bakınız.)
map = new GMap2(document.getElementById(“map”));
Bu kod sayfa üzerinde belirlenen bir element’in id’sine göre yükleneceği yeri belirler.Bu bir div olabilir tablo olabilir.
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(38.4, 31.5), 5);
Bu kodlar ise haritanın kontrolleridir.Harita üzerine istenilen kontrolleri yükler.Ayrıca map.SetCenter ise yükleme anında haritanın hangi koordinatlarına gidileceğini belirler.Yani yukarıdaki koordinatlar ile yüklerseniz Türkiye haritasından başlar..
Buraya kadar tamam ama hala tatmin olabilmiş değilim.Tamamiyle cilent-side çalışmak gözümü korkutmaya başlamıştı.Benim istediğim şuydu,C# ile bu haritayı parmağımda oynatabilmeliydim..
Araştırmaya başladım..Bir çok makale ve örnekten sonra www.codeproject.com da bir örneğe rastladım.Tam istediğim gibiydi.C# ile her şeyi yapabilme özgürlüğü veriyordu..
http://www.codeproject.com/KB/webforms/Google-Maps-User-Control.aspx
Bunu ben yapamazmıydım? İlk aklıma gelen şey buydu.C# olarak sorun yoktu fakat javascript olarak sorun vardı:) C# ile javascript’i nasıl birleştirmeliydim?
Örneği 1-2 gün boyunca incedim.Örnekte sadece bir googlemaps class’ı (cGoogleMap.cs) bir tane webservis(GService.cs) ve bir tanede user control bulunmakta.(GoogleMapControl.ascx)
Örneği indirip incelerseniz user control’de söyle bir ibare yer alıyor:
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
<Services>
<asp:ServiceReference Path=”~/GService.asmx” />
<asp:ServiceReference Path=”~/GoogleMapForASPNet.ascx” />
</Services>
</asp:ScriptManager>
Örneği yazan kişi scriptmanager’a yazmış olduğu servisi referans olarak gösteriyor ve C# classından elde ettiği bilgileri servis aracılığyla javascript’ten çağırıyor.
Can alıcı noktalardan bahsetmek istiyorum.GoogleMapsControl.ascx’te önemli 2 tane fonksiyon bulunmakta:
function fGetGoogleObject(result, userContext)
function fGetGoogleObjectOptimized(result, userContext)
1.Fonksiyon sayfanın ilk yüklendiği anda çalıştığı fonksiyondur.
2.Fonksiyon ise postback işleminde çağırılan fonksiyondur.
İkisininde yaptığı işlem hemen hemen aynıdır.(Kodlara baktığınızda göreceksiniz.).Aralarındaki fark ise ilk yüklenen nesne ile sonradan yüklenen nesne arasındaki değişimleri bulup update etmektir.Bunuda webservis classında görebilirsiniz..
[WebMethod(EnableSession = true)]
public GoogleObject GetGoogleObject()
{
GoogleObject objGoogle = (GoogleObject)System.Web.HttpContext.Current.Session[“GOOGLE_MAP_OBJECT”];
System.Web.HttpContext.Current.Session[“GOOGLE_MAP_OBJECT_OLD”] = new GoogleObject(objGoogle);
return objGoogle;
}
Bu kod webservis içindeki kodtur.Session’dan GOOGLE_MAP_OBJECT’i çekiyor.Haydaa bu session nerden geldi şimdi dediğinizi der gibiyim 🙂
Bu session ise GoogleMapControl.ascx’in kod bölümüne gittinizde sayfanın page_load event’ında ki koda dikkatlice bakın:
if (!IsPostBack)
{
Session[“GOOGLE_MAP_OBJECT”] = GoogleMapObject;
}
else
{
GoogleMapObject = (GoogleObject)Session[“GOOGLE_MAP_OBJECT”];
}
Aynı sayfa içinde
#region Properties
GoogleObject _googlemapobject = new GoogleObject();
public GoogleObject GoogleMapObject
{
get { return _googlemapobject; }
set { _googlemapobject = value; }
}
#endregion
ile var olan GoogleMaps class’na ulaşılıyor.
GoogleMaps classından fazla bahsetmek istemiyorum.Zaten bildiğimiz c# kodları ile yazılmış.
Şimdiye kadar anlattıklarımı toparlarsam nasıl bir yol izlemişiz bakalım:
JavasctiptàWebServisàSessionàUygulama Class’ı
GoogleMaps ile ilgili bütün property’ler(özellikler) bir class yardımıyla alınıyor.Bu class session’a yükleniyor.Session’dan web servis aracılığıyla javascript’ten çağrılıyor.
Örneği incelerken kendime soruyorum.Bu adam postback ile ilk load’u birbirinden nasıl ayırmış yaw.? GoogleMapsControl sayfasında şu javascript kodları gözüme çarpıyor.
function endRequestHandler(sender, args)
{
GService.GetOptimizedGoogleObject(fGetGoogleObjectOptimized);
}
function pageLoad()
{
if(!Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack())
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
}
Artık bundan sonra user control’ü sayfanıza sürükleyip kodları yazmaya başlayabilirsiniz.
Bahadır EKİCİ 