Google Maps API

Yazan : Şadi Evren ŞEKER

Google tarafından geliştirilen ve haritalar üzerinde konum belirlemeye ve google veri tabanında bulunan haritaları çağırmaya yarayan API (application programming interface) ‘tir.

Bu API kullanılarak web sayfalarından google haritalarını çağırmak ve istenilen yerlere baloncuk koymak mümkündür.

Google Haritasını bir siteye yerleştirmek için öncelikle Google tarafından verilen ve API Key ismi verilen bir API anahtarının alınması gerekir. Bu anahtar sayesinde ilgili sitemiz google’a bağlanarak haritalara ulaşabilmektedir.

Google Map ile çalışırken bilinmelidir ki hiç bir bilgi sitemizde bulundurulmamaktadır. Yani bütün harita ve uydu bilgileri google sunucularında barındırılmaktadır.

Örneğin aşağıdaki harita ekranını google maps kullanarak yapmak isteyelim:

Yukarıda görülen görüntüde 4 adet noktaya iğne batırılmış ve bir baloncuk kodlanarak içerisine X ve Y koordinatları ile bir mesaj yazılmıştır. Bunu yapan kod aşağıdadır ve satır satır yorumlanmıştır.

<div id="map" style="width: 500px; height: 400px"></div><br/>


 <script type="text/javascript">


    //<![CDATA[
    var map = new GMap(document.getElementById("map"));
   // google map objesi (nesne) oluşturuluyor


map.centerAndZoom(


new GPoint(31.2902842248665,38.0797391938793), 4);
// bir nokta belirlenmiş ve harita buraya odaklanmış (iğnelenmiş)
var point = new GPoint(31.2902842248665,38.0797391938793);
var marker = new GMarker(point);
map.addOverlay(marker);
//harita üzerindeki zoom aracını ekliyor


var message = "<HTML><HEAD></HEAD><BODY><FORM><b>Hesaplanan koordinatlar:</B><br><b>Lat</b>:";


message +=  "<INPUT TYPE='TEXT' SIZE='12' ID='latbox' VALUE='";


message += "38.0797391938793'><b>Lon</b>:<INPUT TYPE='TEXT' ID='lonbox'  SIZE='12' VALUE='";


message += "31.2902842248665'></FORM><br><br><br><br>";


message += "Sahibi: Şadi Evren ŞEKER";


message += "</BODY></HTML>";
//Harita üzerinde basacağımız mesajı HTML olarak hazırladık


marker.openInfoWindowHtml(message);


// mesajımızı ekrana bastık


map.addControl(new GLargeMapControl());


map.addControl(new GMapTypeControl());
// haritaya kontrolleri ekliyoruz


GEvent.addListener(map, 'click', function(overlay, point) {


        if (overlay) {


map.removeOverlay(overlay);


      } else if (point) {


map.recenterOrPanToLatLng(point);


            var marker = new GMarker(point);


map.addOverlay(marker);


           var message = "<HTML><HEAD></HEAD><BODY><FORM><b>Hesaplanan koordinatlar:</B><br><b>Lat</b>: <INPUT TYPE='TEXT' SIZE='12' ID='latbox' VALUE=''><b>Lon</b>:<INPUT TYPE='TEXT' ID='lonbox'  SIZE='12' VALUE=''></FORM><br><br><br><br></BODY></HTML>";


marker.openInfoWindowHtml(message);


     }


});


// tıklama olaylarında baloncuğun kapanması ve tekrar açılması


// Recenter Map and add Coords by clicking the map


GEvent.addListener(map, 'click', function(overlay, point) {


document.getElementById("latbox").value=point.y;


document.getElementById("lonbox").value=point.x;


});


// kutulara mesaj yazıyoruz


//]]>


    </script>

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir