Scribd Logo
Upload

Welcome to Scribd!

  • Google Maps API Ile Web Sayfalarında Harita Kullanmak - Yazilimgunlugu

    Uploaded by

    coderturk
    183 views5 pages

    Original Title

    Google Maps API Ile Web Sayfalarında Harita Kullanmak _ Yazilimgunlugu

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    183 views5 pages

    Google Maps API Ile Web Sayfalarında Harita Kullanmak - Yazilimgunlugu

    Uploaded by

    coderturk

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    18 03 2012 Google Maps Api ile Web Sayfalarnda Harita Kullanmak | yazilimgunlugu.

    com
    1/5 www.yazilimgunlugu.com/google-maps-api-ile-web-sayfalarinda-harita-kullanmak-makalesi/389.aspx
    Google Maps Api ile Web Sayfalar nda Har ita Kullanmak
    Yazar: Gkhan BACI
    Kategori: ASP.NET
    Eklenme Tarihi: 18.11.2007 21:24:52
    Bu makalemizde Google Map Api'sini kullanarak web sayfalarmzda dinamik ierikli haritalar
    oluturacaz. Ksaca Google Map'den sz edecek olursak, Web Tarayclarnda harita uygulamalar iin kullanlan bir
    servistir. Ayn zamanda uydu grntlerini de kullanclarna sunabilen kaliteli ve hzl b...
    Bu makalemizde Google Map Api'sini kullanarak web sayfalarmzda dinamik ierikli haritalar oluturacaz. Ksaca
    Google Map'den sz edecek olursak, Web Tarayclarnda harita uygulamalar iin kullanlan bir servistir. Ayn
    zamanda uydu grntlerini de kullanclarna sunabilen kaliteli ve hzl bir altyapya sahiptir.
    Bu servisten yararlanmamz iin ncelikle http://www.google.com.tr/apis/maps/signup.html adresinden bir Api-Key
    almamz gerekiyor. ABQIAAAA9ikRRv7Y4KzZVIg2cxyZ-hTwAYXQs5XXFOAmcFTEJQA67VZ_RQxL5RUIy5G-
    nWOAfKPD_Q0H****** bu ekilde bir key elde etmi olmamz gerekiyor.
    Gelelim bu servisi nerede kullanacamza daha ok emlak ile ilgili portallarda kullanlmaktadr. Bu servisi kullanan
    rnek trk portallarda mevcut. sahibinden.com, emlakbox.com gibi? Bizde uygulamamz bir emlak ilannn lokasyon
    bilgilerini tutacak ekilde hazrlayacaz.
    IlanID: Her ilann benzersiz bir deeri olduunu belirtecek
    Baslik: lan Bal
    Nokta: lann harita zerindeki koordinatn belirtecek
    Zoom: Noktaya bal olarak harita zerinde ne kadar yaknlamas gerektiini belirtecek
    Tablomuzu oluturduktan sonra iki adet sayfa tasarlayacaz.
    1. Ekle.aspx (lan bilgilerini ve Koordinatlar alp tablomuza ekleyeceiz)
    2. Goster.aspx (lan bilgilerini ve harita zerinde girdiimiz koordinatlara gre iaretleme ilemini yapacaz)
    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: Haritann koordinatlarn tutacamz label.
    txtZoom: Haritann zoom bilgisini tutacamz label.
    Ekle.aspx.cs
    18 03 2012 Google Maps Api ile Web Sayfalarnda Harita Kullanmak | yazilimgunlugu.com
    2/5 www.yazilimgunlugu.com/google-maps-api-ile-web-sayfalarinda-harita-kullanmak-makalesi/389.aspx

    protected void Page_Load(object sender, EventArgs e)
    {
    string api = "ABQIAAAA9ikRRv7Y4KzZVIg2cxyZ-hTwAYXQs5XXFOAmc-
    FTEJQA67VZ_RQxL5RUIy5GnWOAfKPD_Q0H******";
    //RegisterClientScriptBlock ile Google MAP'in kullanaca classlar, methodlar vs.. sayfamza 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 ekrann ykleyeceimiz ve koordinatlar alacamz methodlar yazyoruz...
    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 Yn ve Zoom tularn ekliyoruz...
    sb.Append("map.addControl(new GSmallMapControl());");
    //GMapTypeControl ile Harita Tipini ekliyoruz...
    sb.Append("map.addControl(new GMapTypeControl());");
    //Haritann ortalanaca koordinatlar.
    sb.Append("map.setCenter(new GLatLng(40.9806594299166, 28.718090057373047), 14);");
    //Mouse'n click eventna bal olarak, tklanan noktann koordinatlarn alyoruz...
    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>");
    //Oluturduumuz js kodlarn sayfaya ekliyoruz...
    ClientScript.RegisterClientScriptBlock(GetType(), "Script2", sb.ToString());
    }

    //aretlenen noktay veritabanzma 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();
    }

    Yukardaki kod blounu oluturduumuzda ve harita zerinde bir nokta belirttiimizde aadaki gibi bir grnm
    elde etmi olacaz.
    18 03 2012 Google Maps Api ile Web Sayfalarnda Harita Kullanmak | yazilimgunlugu.com
    3/5 www.yazilimgunlugu.com/google-maps-api-ile-web-sayfalarinda-harita-kullanmak-makalesi/389.aspx
    Ekleme ilemini tamamladktan sonra sra geldi grntleme ilemine bunun iin Goster.aspx sayfasn oluturacaz?
    Goster.aspx
    <body onload="HaritaYukle();">
    <form id="form1" runat="server">
    <div id="map" style="width: 600px; height: 400px"></div>
    </form>
    </body>

    Harita detaylarn QueryString'den gelen deere gre oluturacaz.
    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>Gkhan BACI</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.. sayfamza ekliyoruz...
    18 03 2012 Google Maps Api ile Web Sayfalarnda Harita Kullanmak | yazilimgunlugu.com
    4/5 www.yazilimgunlugu.com/google-maps-api-ile-web-sayfalarinda-harita-kullanmak-makalesi/389.aspx
    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 kontroln oluturuyoruz...
    sb.Append("var map = new GMap2(document.getElementById('map'));");
    //GSmallMapControl ile Yn ve Zoom tularn ekliyoruz...
    sb.Append("map.addControl(new GSmallMapControl());");
    //GMapTypeControl ile Harita Tipini ekliyoruz...
    sb.Append("map.addControl(new GMapTypeControl());");
    //Haritann ortalanaca koordinatlar.
    sb.Append("map.setCenter(new GLatLng" + Nokta + ", " + Zoom + ");");
    //Harita zerinde oluturulacak function' yazyoruz...
    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 ksmnda HTML kodlarda kullanabiliriz. ve bu ksmda eer birden fazla nokta var ise map.addOverlay
    methodu ile ilemleri yeni noktalar oluturabiliriz?
    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 iin http://www.google.com/apis/maps/documentation adresini ziyaret edebilirsiniz...
    Baka bir makalemde grmek dileiyle...
    Gkhan BACI
    Micoof Ceified Pofeional
    18 03 2012 Google Maps Api ile Web Sayfalarnda Harita Kullanmak | yazilimgunlugu.com
    5/5 www.yazilimgunlugu.com/google-maps-api-ile-web-sayfalarinda-harita-kullanmak-makalesi/389.aspx

    You might also like