Makale Özeti

Bu makalemizde Google Map Api'sini kullanarak web sayfalarımızda dinamik içerikli haritalar oluşturacağız. Kısaca Google Map'den söz edecek olursak, Web Tarayıcılarında harita uygulamaları için kullanılan bir servistir. Aynı zamanda uydu görüntülerini de kullanıcılarına sunabilen kaliteli ve hızlı bir altyapıya sahiptir.

Makale

Bu makalemizde Google Map Api'sini kullanarak web sayfalarımızda dinamik içerikli haritalar oluşturacağız. Kısaca Google Map'den söz edecek olursak, Web Tarayıcılarında harita uygulamaları için kullanılan bir servistir. Aynı zamanda uydu görüntülerini de kullanıcılarına sunabilen kaliteli ve hızlı bir altyapıya sahiptir.

Bu servisten yararlanmamız için öncelikle http://www.google.com.tr/apis/maps/signup.html adresinden bir Api-Key almamız gerekiyor. ABQIAAAA9ikRRv7Y4KzZVIg2cxyZ-hTwAYXQs5XXFOAmcFTEJQA67VZ_RQxL5RUIy5G-nWOAfKPD_Q0H****** bu şekilde bir key elde etmiş olmamız gerekiyor.

Gelelim bu servisi nerede kullanacağımıza daha çok emlak ile ilgili portallarda kullanılmaktadır. Bu servisi kullanan örnek türk portallarıda mevcut. sahibinden.com, emlakbox.com gibi? Bizde uygulamamızı bir emlak ilanının lokasyon bilgilerini tutacak şekilde hazırlayacağız.



IlanID: Her ilanın benzersiz bir değeri olduğunu belirtecek
Baslik: İlan Başlığı
Nokta: İlanın harita üzerindeki koordinatını belirtecek
Zoom: Noktaya bağlı olarak harita üzerinde ne kadar yakınlaşması gerektiğini belirtecek

Tablomuzu oluşturduktan sonra iki adet sayfa tasarlayacağız.
1. Ekle.aspx (İlan bilgilerini ve Koordinatları alıp tablomuza ekleyeceğiz)
2. Goster.aspx (İlan bilgilerini ve harita üzerinde girdiğimiz koordinatlara göre işaretleme işlemini yapacağız) 

Ekle.aspx

 
<body onload="HaritaYukle();">
    <form id="form1" runat="server">
        <div id="map" style="width: 600px; height: 400px"></div>
        Koordinat :
        <asp:TextBox ID="txtKoordinat" runat="server" Width="250px"></asp:TextBox><br />
        Zoom :
        <asp:TextBox ID="txtZoom" runat="server"></asp:TextBox><br />
        <asp:Button ID="btnEkle" runat="server" OnClick="btnEkle_Click" Text="Ekle" />
    </form>
</body>
   

txtKoordinat: Haritanın koordinatlarını tutacağımız label.
txtZoom: Haritanın zoom bilgisini tutacağımız label. 

Ekle.aspx.cs

 
protected void Page_Load(object sender, EventArgs e)
{
    string api = "ABQIAAAA9ikRRv7Y4KzZVIg2cxyZ-hTwAYXQs5XXFOAmc-FTEJQA67VZ_RQxL5RUIy5GnWOAfKPD_Q0H******";
    //RegisterClientScriptBlock ile Google MAP'in kullanacağı classlar, methodlar vs.. sayfamıza ekliyoruz...
    ClientScript.RegisterClientScriptBlock(GetType(), "Script1", "<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=" + api + "' type='text/javascript'></script>");
    //Harita ekranını yükleyeceğimiz ve koordinatları alacağımız methodları yazıyoruz...
    StringBuilder sb = new StringBuilder();
    sb.Append( "<script type=text/javascript>");
    sb.Append( "function HaritaYukle()");
    sb.Append( "{");
    sb.Append( "if (GBrowserIsCompatible())");
    sb.Append( "{");
    sb.Append( "this.counter = 0;");
    sb.Append( "var map = new GMap2(document.getElementById('map'));");
    //GSmallMapControl ile Yön ve Zoom tuşlarını ekliyoruz...
    sb.Append( "map.addControl(new GSmallMapControl());");
    //GMapTypeControl ile Harita Tipini ekliyoruz...
    sb.Append( "map.addControl(new GMapTypeControl());");
    //Haritanın ortalanacağı koordinatlar.
    sb.Append( "map.setCenter(new GLatLng(40.9806594299166, 28.718090057373047), 14);");
    //Mouse'ın click eventına bağlı olarak, tıklanan noktanın koordinatlarını alıyoruz...
    sb.Append( "GEvent.addListener(map, 'click', function(marker, point) { if (marker) { map.removeOverlay(marker); } else { map.addOverlay(new GMarker(point)); document.getElementById('" + lblNoktaKoordinat.UniqueID + "').innerHTML = point; document.getElementById('" + lblNoktaZoom.UniqueID + "').innerHTML = map.getZoom(); }});");
    sb.Append( "}");
    sb.Append( "}");
    sb.Append( "</script>");
    //Oluşturduğumuz js kodlarını sayfaya ekliyoruz...
    ClientScript.RegisterClientScriptBlock(GetType(), "Script2", sb.ToString());
}
 
//İşaretlenen noktayı veritabanızıma ekliyoruz...
protected void btnEkle_Click(object sender, EventArgs e)
{
    SqlConnection con = new SqlConnection( "Server=localhost; Database******************;");
    SqlCommand com = new SqlCommand( "Insert Ilanlar Values(@Baslik, @Nokta, @Zoom)", con);
    com.Parameters.AddWithValue( "@Baslik", "Deneme 1");
    com.Parameters.AddWithValue( "@Nokta", txtKoordinat.Text);
    com.Parameters.AddWithValue( "@Zoom", txtZoom.Text);
    con.Open();
    com.ExecuteNonQuery();
    con.Close();
}
   

Yukarıdaki kod bloğunu oluşturduğumuzda ve harita üzerinde bir nokta belirttiğimizde aşağıdaki gibi bir görünüm elde etmiş olacağız.



Ekleme işlemini tamamladıktan sonra sıra geldi görüntüleme işlemine bunun için Goster.aspx sayfasını oluşturacağız?


Goster.aspx


<body onload="HaritaYukle();">
    <form id="form1" runat="server">
        <div id="map" style="width: 600px; height: 400px"></div>
    </form>
</body>
 

Harita detaylarını QueryString?den gelen değere göre oluşturacağız.

Goster.aspx.cs

 
protected void Page_Load(object sender, EventArgs e)
{
    string Baslik = ""; 
    string Nokta = ""; 
    string Zoom = ""; 
    string ilanID = "";
    if (Request.QueryString[ "ID"] != null)
    { ilanID = Request.QueryString[ "ID"].ToString(); }
    else 
    { ilanID = "0"; }
    SqlConnection con = new SqlConnection( "Server=.; Database=********************");
    SqlDataAdapter da = new SqlDataAdapter( "Select Baslik, Nokta, Zoom From Ilanlar Where IlanID=@IlanID", con);
    da.SelectCommand.Parameters.AddWithValue( "@IlanID", ilanID);
    DataTable dt = new DataTable();
    da.Fill(dt);
    if (dt != null && dt.Rows.Count > 0)
    {
        Baslik = dt.Rows[0][ "Baslik"].ToString() + "<br><a href=http://gokhanbagci.info>Gökhan BAĞCI</a>";
        Nokta = dt.Rows[0][ "Nokta"].ToString();
        Zoom = dt.Rows[0][ "Zoom"].ToString();
    }
    string api = "ABQIAAAA9ikRRv7Y4KzZVIg2cxyZ-hTwAYXQs5XXFOAmc-FTEJQA67VZ_RQxL5RUIy5GnWOAfKPD_Q0H8bVmgg";
    //RegisterClientScriptBlock ile Google MAP'in kullanacağı classlar, methodlar vs.. sayfamıza ekliyoruz...
    ClientScript.RegisterClientScriptBlock(GetType(), "Script1", "<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=" + api + "' type='text/javascript'></script>");
    StringBuilder sb = new StringBuilder();
    sb.Append( "<script type='text/javascript'>");
    sb.Append( "function HaritaYukle() ");
    sb.Append( "{");
    sb.Append( "if (GBrowserIsCompatible()) ");
    sb.Append( "{");
    //Harita kontrolünü oluşturuyoruz...
    sb.Append( "var map = new GMap2(document.getElementById('map'));");
    //GSmallMapControl ile Yön ve Zoom tuşlarını ekliyoruz...
    sb.Append( "map.addControl(new GSmallMapControl());");
    //GMapTypeControl ile Harita Tipini ekliyoruz...
    sb.Append( "map.addControl(new GMapTypeControl());");
    //Haritanın ortalanacağı koordinatlar.
    sb.Append( "map.setCenter(new GLatLng" + Nokta + ", " + Zoom + ");");
    //Harita üzerinde oluşturulacak function'ı yazıyoruz...
    sb.Append( "function createMarker(point, number, mesaj) ");
    sb.Append( "{");
    sb.Append( "var marker = new GMarker(point);");
    sb.Append( "marker.value = number;");
    sb.Append( "GEvent.addListener(marker, 'click', function() ");
    sb.Append( "{");
    sb.Append( "map.openInfoWindowHtml(point, mesaj);");
    sb.Append( "}");
    sb.Append( ");");
    sb.Append( "return marker;");
    sb.Append( "}");
    sb.Append( "var point = new GLatLng" + Nokta + ";");
    //mesaj kısmında HTML kodlarıda kullanabiliriz. ve bu kısımda eğer birden fazla nokta var ise map.addOverlay methodu ile işlemleri yeni noktalar oluşturabiliriz?
    sb.Append( "map.addOverlay(createMarker(point, 1, '" + Baslik + "'));");
    sb.Append( "}");
    sb.Append( "}");
    sb.Append( "</script>");
    ClientScript.RegisterClientScriptBlock(GetType(), "Script2", sb.ToString());
}
   

Ve sonuç?



Daha fazla bilgi için http://www.google.com/apis/maps/documentation adresini ziyaret edebilirsiniz... 

Başka bir makalemde görüşmek dileğiyle... 

Gökhan BAĞCI
Microsoft Certified Professional