Geocoding (adres bulma) nedir?

Haritada görüntülenmek istenen adresin öncelikle koordinatlarını bilmek gerekmektedir. Geocoding, bir adresi enlem-boylam koordinatlarına çeviren ve harita üzerinde o adresi koordinatlarıyla gösteren bir servistir. Haritanızda bu servisi kullanabilmek için gereken fonksiyonlar vardır. Bu fonksiyonların kullanılabilmesi için ise kullanıcı arayüzleri tasarlanmalıdır.

Bir önceki örneğimizde anlatıldığı gibi, HTML dosyanızın <body></body> kısmının düzenlenmesi ve <head></head> kısmıyla <title></title> kısmı arasında Google Harita API’sinin <script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script> şeklinde tanımlanması gerekmektedir. <div> kısmı ise buton ve metin alanının eklenebilmesi için aşağıda anlatıldığı gibi düzenlenmelidir.


<body onload="initialize()">
      <div>
  <input id="address" type="textbox" value="Ankara, Türkiye">
   <input type="button" value="Geocode" onclick="adresKodla()"> 

</div>
<div id="map_canvas" ></div>
</body>

“Ankara, Türkiye” değeri ile metin alanı oluşturma ;


<input id="address" type="textbox" value="Ankara,Türkiye">

Geocode” buton ismi ile adresKodla() fonksiyonunun çalıştırılması ;


<input type="button" value="Geocode" onclick="adresKodla()">

Girişlerden aldığımız bu değerler ile adresKodla() fonksiyonunda adresin enlem-boylam koordinatlarına dönüştürülmesi sağlanıyor. “adress” girdisi, metin alanındaki adrese tekabül etmektedir. Eğer adres başarıyla koordinatlara dönüştürülüyorsa, harita o koordinatları merkez alıp, markerını merkeze koyuyor. Eğer koordinata çevirme işlemi başarısız olduysa, hangi durumdan dolayı olduğuna dair bir mesaj ekranda beliriyor.


function adresKodla() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode, " + status + " durumundan dolayı başarısız oldu.");
      }
    });
  }

Sadece adresKodla() fonksiyonunda kullanılacak “adress” değerinin kimliği ;


var address = document.getElementById("address").value;

Metin alanına girilen adresin koordinatlara dönüştürülmesi ;


  geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode, " + status + " durumundan dolayı başarısız oldu.");
      }
    });
  }

Adres koordinatlarının haritanın merkezi olması ;


 map.setCenter(results[0].geometry.location);

Adres koordinatlarına atılacak olan markerın oluşturulması ve haritaya koyulması ;


var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });

Adres koordinatlarının bulunamaması durumunda ekranda belirecek olan durum hatası mesajı ;


 else {
        alert("Geocode, " + status + " durumundan dolayı başarısız oldu.");
      }

Haritanızı çalışmak için sayfanızın <body> kısmına eklediğiniz initialize() fonksiyonunda aşağıdaki gibi adresKodla() fonksiyonun çağırılması gerekmektedir. Böylece metin alanına girdiğiniz adres, önce kodlanıp daha sonra da harita üzerinde marker ile görüntülenebilmektedir. ” geocoder ” ve ” map ” değişkenlerinin, hem initialize() hem de adresKodla() fonksiyonlarında kullanılacağından dolayı, globalde tanımlanması gerekmektedir. Böylece her bir değişim kayıt altına alınacak ve her iki fonksiyon da bu değişkenlerin en son değerlerini kullanabilecektir.


var geocoder;
var map;

function initialize() {
    geocoder = new google.maps.Geocoder(); // geocoder değerinin durumunun değişmesi(adresin koordinatını alması)
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

Bu düzenlemelerle, bir önceki anlatımımızda yapılan basit bir Google haritasına kolaylıkla adres bilgilerini koordinatlara çeviren Geocoding servisini eklemiş oluyorsunuz.

İyi denemeler…