ASP.NET ile Google Maps Kullanımı

Ebru Demiryürek —  9 Şubat 2015 — 14 Comments

Bu yazımda size Asp projesinde google maps kullanarak harita göstermeye çalışacağım. Öncelikle File’dan new-project diyip ASP.NET Web Application’ı seçip projeye isim veriyoruz.

1

Şekil 1: ASP projesinin açılması

Aşağıdaki resimde görüldüğü gibi yeni masterlı bir .cs sayfası açmak için site.master yazan yere gelip sağ-click yapıp “Add Content Page” diyoruz. Böylece sayfamıza master eklemiş olduk. Master’ ın da ne olduğuna yer gelmişken değinmek gerekirse master, tıklanan her sayfada görmek istediğimiz kalıp görselliktir, yapıdır. Bir nevi menü kısımlarında görünen anasayfa, iletişim kısmı örnek verilebilir.

3_master

Şekil 2: Siteye Master eklemek

İlk olarak internetten google map kullanmak için GMaps.dll uzantılı dosyayı indirmemiz gerekiyor. Şekil 3’de References’da “Add References” kısmından bilgisayarımızdaki dosyayı seçip  projemize ekliyoruz.

4_add_reference

Şekil 3: Reference eklemek

Bu dosyayı toolbox’a da eklememiz gerekiyor. Bende ekli olduğu için gözüküyor ama siz onu dikkate almayın. Toolbox kısmına gelip sağ-click yapıp “Add tab” diyoruz, sonra da adını Gmap veriyoruz yani kolayca bulmak için ben öyle verdim.

5_add_tab

Şekil 4: Gmaps kullanmak için toolboxa yeni bir tab açımı

Şekil 5’de de bu eklediğimiz taba sağ-click yapıp choose item diyoruz ve Browser’a click yapınca yine GMaps.dll’yi ekliyoruz ve GMaps’in altında hemen görebiliyoruz eklenen verileri.

6_choose_item

Şekil 5:Gmaps eklenmesi

Şekil 6’da bu eklenen GMap’i eklediğimiz .cs dosyasının source kısmına çekip bırakıyoruz. Bu yazı haritanın gözükmesi için yeterli.Haritanın boyutunu design kısmından harita yerine tıklayıp property’den değiştirebiliriz.

7_gmap_at

Şekil 6: Gmaps ile gelen araçlar

using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Subgurim.Controles;
using Subgurim.Controles.GoogleChartIconMaker;
using System.Drawing;

namespace googlemap_kadin_yazilimci
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           
            GLatLng latlon = new GLatLng(39.50, 34.80); //istenilen enlem boylam değerlerini merkez olarak alır
            GMap1.setCenter(latlon, 4);

            GMarker gm;
            GMarker icono = new GMarker(latlon);

            PinIcon p;
            p = new PinIcon(PinIcons.flag, Color.Cyan);  //istenen yere bırakılacak bayrak işaretçisi 
            gm = new GMarker(new GLatLng(Convert.ToDouble(39), Convert.ToDouble(35)), //parantezdeki sayılar enlem boylam buraya işaretçi bırakılacak
                     new GMarkerOptions(new GIcon(p.ToString(), p.Shadow())));
            GInfoWindow win;
            win = new GInfoWindow(gm, "" + "", false, GListener.Event.mouseover);  //haritaya eklenir
            GMap1.Add(win);
        }
    }
}

Gördüğünüz gibi kodumuz Gmaps eklemekten daha kolay 🙂 Herkese kolay gelsin arkadaşlar.

Ebru Demiryürek

Posts

14 responses to ASP.NET ile Google Maps Kullanımı

  1. siz şakamasınız ya ? kadından yazılımcımı olurmuş.. pehhh
    hem bu yazıyıda hiç beğenmedim.
    1 referanslık satırı saatlerce anlatmışsınız. yazılım projelerinin faaliyete geçmemesi için nedenlerin baş satılarında sizi görürüz kesin .d

    gidin daron ile burak selimin sayfalarından biraz öğüt alın.

    • Ebru Demiryürek 12 Şubat 2015 at 17:23

      senin gibilere cevap vermek bile çok . kadınlardan yazılımcı olmuyorsa sayfayı da takip etmeyin bi zahmet 😀 kadından çok erkekler kullanıyor zaten sayfayı ne hikmetse .

  2. GLatLng latlon = new GLatLng(39.50, 34.80); //istenilen enlem boylam değerlerini merkez olarak alır
    GMap1.setCenter(latlon, 4);

    GMarker gm;
    GMarker icono = new GMarker(latlon);

    PinIcon p;
    p = new PinIcon(PinIcons.flag, Color.Cyan); //istenen yere bırakılacak bayrak işaretçisi
    gm = new GMarker(new GLatLng(Convert.ToDouble(39), Convert.ToDouble(35)), //parantezdeki sayılar enlem boylam buraya işaretçi bırakılacak
    new GMarkerOptions(new GIcon(p.ToString(), p.Shadow())));
    GInfoWindow win;
    win = new GInfoWindow(gm, “” + “”, false, GListener.Event.mouseover); //haritaya eklenir
    GMap1.Add(win);

    yukardakileri tek satırda yazmayı öğrende gel.

  3. Elinize sağlık başarılarınızın devamını dilerim keşke bizim üniversitedeki kızlarda sizler kadar ilgili olabilse bilgisayara.

  4. Tebrik ederim güzel bir paylaşım.
    Bir zaman yazılımdan nefret ediyordum.hatta bu işi bırakıp başka işlere girişmiştim,o başka işleri yaparken mesleğimin kıymetini anladım ve başka işlerde çalışırken programlar yazmaya başladım.sonra yazılıma geri döndüm.şimdi yine acaba bıraksammı diyorum 🙂 Yani ne olursa olsun bu işi seven yapar,ne cinsiyetiniz ne kişiliğiniz,ne okuduğunuz okul hiç önemli değil,bu iş önce gönül işi .

  5. Çalışmalarınızda başarılar dilerim. Bu sayfadaki yorumlar ve cevaplar bayağı güldürdü hem de düşündürdü ne yalan söyliyeyim…

    Programcının kadını erkeği olmaz. Programcı programcıdır :)))
    Tek satırda yazılan kodda “kod” değildir. Herkesin anlayabildiği kod “kod” dur.

    “Kadın Programcılar” diye site açan bir yabancı varmıdır bilmyorum ancak,
    Böyle bir siteyi takip edipde aklına geleni yorum diye yazan “erkek” programcılar da ancak bizde olur orası kesin…

    Önemli olan üretmek ve bilgi paylamaktır. Başarılar ve bilgiler için tşk.ler.

  6. Tebrik ederim güzel bir paylaşım.Bu arada başkalarına saygılı olmayı öğrenemeyip tek satırda tüm codu yazmayı marifet sanan şahsiyetide kınıyorum.

  7. Ebru hanım merhaba, bende emlak projesinde kullanıyorum subgurim i. Herşey tamam ama, birşeyi çözemedim. Gmap1 in onclick özelliği var oradan tıklama ile marker ekletiyorum. Snra “clearOverlays();” ile temizletip tekrar push ile ekleme yaptırıyorum buraya kadar sorun yok. Ancak istiyorum ki, marker i sürükleyerek te koordinat değerlerini alabileyim. Ancak böyle bir özellik server taraflı göremedim. Mümkün müdür?

  8. Ebru hanım, şimdi durum şu şekilde; Emlak projesinde ilanlar için adres bölümü var. Ben burada, Update panel ile il ilçe semt mahalle sokak gibi girişlerle haritaya yön verdiriyorum. En sonunda evini bulan kullanıcı gmap1.Click eventi ile marker ekliyor ve buranın lat-lang değerlerini alıyorum, veritabanına kaydediyorum. Buraya kadar hiçbir sorunum yok.

    Kullanıcı ilanını güncellemek isteyebiliyor. Bu nedenle page_load olayında haritayı koordinata göre center edip, marker ekletiyorum. Burada da problem yok. Ama kullanıcı gidipte, tekrar başka bir yeri seçtiğinde, ilk eklediği marker silinmiyor. Click olayı şu şekilde:

    protected string GMap1_Click(object s, GAjaxServerEventArgs e)
    {
    GMarker marker = new GMarker(e.point);
    string strInfoWindow = string.Format(@”pointlat = {0}lng = {1}”, e.point.lat, e.point.lng);
    GInfoWindow window = new GInfoWindow(marker, strInfoWindow, true);

    GIcon icon = new GIcon();
    icon.image = “http://labs.google.com/ridefinder/images/mm_20_red.png”;
    icon.shadow = “http://labs.google.com/ridefinder/images/mm_20_shadow.png”;
    icon.iconSize = new GSize(12, 20);
    icon.shadowSize = new GSize(22, 20);
    icon.iconAnchor = new GPoint(6, 20);
    icon.infoWindowAnchor = new GPoint(5, 1);

    GMarkerOptions mOpts = new GMarkerOptions();
    mOpts.clickable = true;
    mOpts.draggable = true;
    mOpts.Animation = GMarkerOptions.AnimationType.Bounce;
    mOpts.icon = icon;
    GMap1.GZoom = 13;
    marker.options = mOpts;

    Session[“lat”] = e.point.lat;
    Session[“lng”] = e.point.lng;
    return “clearOverlays();” + window.ToString(e.map) + “markersArray.push(” + GMap1.getGMapElementById(marker.ID) + “);”;
    }

    clearOverlays() – fonksiyonu markersArray[] listesine kayıtlı olanlar içinde dönüp varolan marker leri siliyor. markersArray.push ile de ekleme yeni marker ekleme işini yaptırıyorum.

    StringBuilder sb = new StringBuilder();
    sb.Append(“var markersArray=[];”);
    sb.Append(“function clearOverlays() {“);
    sb.Append(” for (var i = 0; i < overlayArray.length; i++ ) {");
    sb.Append(" overlayArray[i].setMap(null);");
    sb.Append(" }");
    sb.Append(" overlayArray = [];"); sb.Append("}");
    GMap1.Add(sb.ToString());

    clearOverlays() fonksiyonu da yukarıdaki gibi…

    Bunlarda hiçbir problem yok ve gayet güzel çalışıyor. Asıl sorun ise şurada başlıyor:

    GMarker marker = new GMarker(latlang, mOpts);
    GMap1.Add(marker);

    Yukarıdaki kod parçası ile veritabanından gelen latlang koordinatları ile markeri yerleştiriyorum. Ancak markersArray[] listesine bağlı olmadığı için, clarOverlays() methodu bir işe yaramıyor. Yani silmiyor. Benim her click işleminde harita üzerindeki tüm marker leri silip, tıklanılan yere yenisini yerleştirmem gerekiyor. 2 gündür araştırıyorum hiçbir şekilde çözüm sağlayamadım. Yardımcı olur musunuz?

  9. Öncelikle Barış gibi karakter yoksunu insanları moralinizi bozmasın..
    İlk defa bir forumda aklıma bir yer takılmadan uygulama bir yapıyı dahil edebildim emeğinize sağlık..

    • Ebru Demiryürek 8 Mart 2016 at 10:50

      Teşekkür ederim Süleyman Bey güzel yorumunuz için. Mümkün oldukça her adımı belirtmeye çalışıyorum

Mehmet için bir cevap yazın Cevabı iptal et