Makale Özeti

Merhaba, bu makalede Google Maps nesnesini javascript kullanarak bir yeri harita üzerinde işaretlemeyi ve bu yerin belirli bir yarıçapta yakınlarında bulunan otel, restorant, okul, tesis vb. kategorideki yerleri harita üzerinde işaretlemeyi göstereceğim.

Makale

Merhaba arkadaşlar, bu makalemde bazı ASP.NET uygulamalarında yer yer ihtiyaç hissedilen Google Places kullanımını açıklamaya çalışacağım. 

Bildiğiniz üzere Google Map ücretsiz bir servistir ve harita üzerinde gösterilmesi istenen yerin koordinatları <embed> kodları arasında uygun yere girilerek uygulamalarımızda bu yerin işaretli gösterimini sağlayabiliriz.

Fakat söz konusu durum tek bir harita nesnesi ve değişkenlik gösteren koordinat değerleri olduğunda biraz zahmetli oluyor. Neyse ki bu gibi durumlar için Google bizlere Google Places API sini sunmuştur, istediğimiz zaman ücretsiz olarak sayfalarımıza implement edip kullanabiliriz.

Şimdi öncelikle örneğimiz için yeni bir GoogleMaps adında ASP.NET Empty Web Site oluşturuyoruz.

  

Projemizi oluşturduktan sonra sıra Google Places nesnemizi yerleştireceğimiz sayfamızı oluşturmaya geldi. Solution Explorer penceresinden projemizin üzerine sağ tıklayarak Add >> New Item seçeneğini tıklıyoruz. karşımıza gelen pencereden ise aşağıdaki gibi Web Form seçeneğini tıklayıp ardından da Add butonuna tıklayarak yeni aspx sayfamızı projemize ekliyoruz.

 

Projemize bu sayfamızı da ekledikten sonra sayfamızın markup(Html) sayfasına gidiyoruz.

İlk önce Google Places nesnemizin görüneceği kısmın ve bilgi penceresinin Css leri ile işleme başlayalım. Aşğıdaki Css kodlarını <Head> tag leri arasına yerleştiriyoruz. 

<style type="text/css">
        #harita
        {
            height: 500px;
            width: 950px;
            border: 1px solid #333;
            margin-top: 0.6em;
        }
        
        .bilgipencere
        {
            font-size: 16px;
            width: 300px;
            color: Blue;
            font-family: Verdana;
        }
    </style>
 

Google Places API sini kullabilmek için impelement etmemiz gereken javascript library i aşağıdaki gibi <head> tag leri arasına yerleştiriyoruz.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
 

Şimdi sıra bu API yi kullanabileceğimiz javascript fonksiyonlarını yazmaya geldi. KoordinatBul ve YakinYerleriGoster adlı iki adet javascript fonksiyonu yazarak Google Places nesnemizde görüntüleyeceğimiz harita ve işaretli yer/yerler bilgisinin alt zemini hazırlamış olacağız. Aşağıdaki gibi iki ayrı fonskiyonu <head> tag leri arasına yerleştiriyoruz.

1. Fonskiyon

<script type="text/javascript">
        var map;
        var infowindow;
        function YakinYerleriBul() {
// Hidden Field lar ile CodeBehind da girişini yaptığımız değerleri X1 ve X2 adlı değişkenlere aktarıyoruz.
            var X1 = document.getElementById('<%=hfEnlem.ClientID%>').value;
            var Y1 = document.getElementById('<%=hfBoylam.ClientID%>').value;
            var pyrmont = new google.maps.LatLng(X1, Y1);
// Harita nesnesine API aracılığyla elde ettiğimiz class tan map öğesini yükleyip map adlı değişkene aktarıyoruz.
//Buradaki en uygun zoom değeri 15 olup istenildiği gibi değiştirilebilir.
            map = new google.maps.Map(document.getElementById('harita'), {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: pyrmont,
                zoom: 15
            });
 
            var request = {
                location: pyrmont,
                radius: 500,
                types: ['lodging', 'school'],
                name: ['otel|hotel|okul']
            };
            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);
            service.search(request, callback);

        }

        function callback(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i++) {
                    createMarker(results[i]);
                }
            }
        }

        function createMarker(place) {
            var placeLoc = place.geometry.location;
            var marker = new google.maps.Marker({

                map: map,
                position: place.geometry.location
            });
            google.maps.event.addListener(marker, 'mouseover', function () {
                infowindow.setContent("<div class='bilgipencere'>" + place.name + "<br />" + place.vicinity + "</div>");
                infowindow.open(map, this);
            });
            google.maps.event.addListener(marker, 'mouseout', function () {
                infowindow.close();
            });
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent("<div class='bilgipencere'>" + place.name + "<br />" + place.vicinity + "</div>");
                infowindow.open(map, this);
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
	
    </script>


 

2. Fonksiyon

<script type="text/javascript">
        function KoordinatBul() {
// Hidden Field lar ile CodeBehind da girişini yaptığımız değerleri X1 ve X2 adlı değişkenlere aktarıyoruz.
            var X1 = document.getElementById('<%=hfEnlem.ClientID%>').value;
            var Y1 = document.getElementById('<%=hfBoylam.ClientID%>').value;
// Yer adının girişini elle yaptık onu da CodeBehind da atamasını yaptığımız hdAd adlı kontrolden alıp HotelName adlı değişkene aktarıyoruz.
            var HotelName = document.getElementById('<%=hfAd.ClientID%>').value;
            var homeLatlng = new google.maps.LatLng(X1, Y1);
            HotelName = "<div class='bilgipencere'>" + HotelName + "</div>";
            var myOptions = {
                zoom: 15,
                center: homeLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("harita"), myOptions);
            var marker = new google.maps.Marker({
                position: homeLatlng,
                map: map
            });
            var infowindow = new google.maps.InfoWindow({
                content: HotelName,
                map: map,
                position: homeLatlng
            });
            infowindow.open(map, marker);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
                            
    </script>
 
  

"request" adlı değişken işaretlenmesini istediğimiz yerlerin kategorilerini ve bu yerlerin isimlerinde geçecek olan metin bilgisini kriter olarak girdiğimiz kısımdır. Örneğin restorant ların da görünmesi isteniyorsa name types property > types: ['lodging', 'school', 'restaurant'] //şeklinde bir giriş yapılabilir. Örneğimizde yalnızca otel ve okul işaretlenmesi talebinde bulunduk. Yine bu kısımdaki 'radius' adlı property e istenilen yarıçap bilgisi metre cinsinden yazılabilir. Örneğimizde bu değer 500 m yarıçapta olacak şekilde yerlerin bilgisini talep ettik.

 google.maps.event.addListener ile başlayan kısımlar ise bu işaretli yerlerin bilgi pencerelerinin nasıl yönetileceği hususunda bir takım event lerin girişini yaptığımız kısımdır. Örnek olması açısından ben "mouseover" "mouseout" ve "click" olaylarının kodlarını 1. Fonskiyonda girdim. Eğer yer bilgisi penceresinin tıklama ile gelmesi isteniyorsa "mouseover" ve "mouseout" olayları kaldırılabilir.

Tüm bu işlemlerden sonra sayfamızın HTML kısmını aşağıdaki gibi düzenliyoruz.


<form id="form1" runat="server">

<div>
        <input class="top_command" onclick="YakinYerleriBul()" type="button" value="Yakındaki Yerleri Göster" /><input
            class="top_command" onclick="KoordinatBul()" type="button" value="Koordinati Göster" />
        <asp:HiddenField ID="hfEnlem" runat="server" />
        <asp:HiddenField ID="hfBoylam" runat="server" />
        <asp:HiddenField ID="hfAd" runat="server" />
        <div id="harita">
        </div>
    </div>
    </form>
 

 Kontrolleri de şekildeki gibi düzenledikten sonra son aşama olarak Code Behind Page_Load olayında şu satırları ekliyoruz.

protected void Page_Load(object sender, EventArgs e)
        {
// Örnekte ANKARA ilini Google Map teki koordinatlarını aldık ve direk değer olarak burada giriyoruz.
            // İstenirse bu değerler veritabanından ya da başka bir kaynaktan alınabilir.
            hfEnlem.Value = "39.938172";
            hfBoylam.Value = "32.854408";
            hfAd.Value = "Ankara Hotel";
          } 
 Projenin son halini aşağıdaki linkten indirebilirsiniz. İyi çalışmalar... :)
 

GoogleMaps.rar

Oğuzhan CERRAH
.NET Yazılım Uzmanı