Google Maps API Kullanımı
Google'ın harita görüntüleme sistemi olan Google Maps'in nasıl kullanılacağına dair Türkçe bir döküman hazırladım umarım sizlere faydası dokunur.
Öncelikle Google Maps ile uygulama geliştirmek için temel seviyede Javascript bilgisine sahip olmanız faydanızadır ancak Javascript bilmeseniz de Google'ın kendi dökümantasyonunda çok güzel örnekler var, bu örnekleri gözden geçirerek temel Javascript bilgisine de sahip olabilirsiniz.
Öncelikle hazırladığınız Google Maps uygulamasını internet sitenize ekleyebilmeniz için API Key'e sahip olmanız gerekiyor (Gmail hesabına sahip olmanız yeterli ). Ancak ücretsiz olarak aldığınız API Key'de bazı sınırlamalar var. Örneğin günlük 25.000 sayfa görüntüleme gibi. Bu sınırı ücret karşılığı arttırabilirsiniz ya da "Bussiness Licence" alabilirsiniz (Bu türden lisansın teknik destek gibi ayrıcalıkları var.)
Google Maps'in geliştirilmekte olan ve önerilen versiyonu v3 tür. Buradaki örneklerde de bu versiyonu kullanacağım.
Temel HTML etiketlerini yazdıktan sonra <head> tagları arasına
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?&sensor=true">
</script>
kodlarımızı yazarak uygulamamızda Google API kullanacağımızı belirtiyoruz. Şuan için sayfamızı yayınlamayacağımızdan API Key gibi parametrelerini eklemiyoruz adrese. Daha sonra yine head tagları arasına
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(41.042074,28.954468),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map" style="width:100%; height:100%"></div>
</body>
kodlarımızı ekliyoruz. Açıklamasını yaparsak,
Kullanıcı sayfamızı açtığında yüklenmek üzere bir initialize metodu oluşturuyoruz. Daha sonra haritanın özelliklerini belirliyoruz.
center: new google.maps.LatLng(41.042074,28.954468): Haritamızın merkezini belirtiyoruz. LatLng methodu enlem(latitude) ve boylam (longitude) olmak üzere iki parametre alır. Bu iki parametre Geocode denilen bunun gibi bir siteden öğrenebileceğiniz rakamlardan oluşur.
mapTypeId: google.maps.MapTypeId.ROADMAP: Harita türünü belirtir. Bunu ortaokuldan hatırlayacağınız siyasi harita, coğrafi harita gibi düşünebilirsiniz. ROADMAP bunlardan bir tanesi ancak siz uygulamanıza göre HYBRID, ROADMAP, SATELLITE ya da TERRAIN seçeneklerinden birini kullanabilirsiniz.
zoom: Haritanın belirtilen koordinatlara ne kadar yaklaşacağını belirtir. 0-20 arasında bir değer verebilirsiniz. 0 en uzak , 20 en yakındır. Uygulamanıza göre değiştirebilirsiniz.
var map = new google.maps.Map(document.getElementById("map"), myOptions);
kod parçası ile de ID si "map" olan tag da çalıştırılamsını istiyoruz.
Bu işlemler sonrasında tam ekran ve İstanbul'u merkez kabul eden bir harita elde edebilirsiniz.
MARKER: Harita üzerinde bir noktayı gösteren simge.
Haritayı oluşturduktan sonra bu harita üzerinde istediğimiz bir noktayı nasıl göstermek için marker denen nesneleri kullanıyoruz.
var marker1= new google.maps.Marker(
{
icon: image.png,
position: new google.maps.LatLng(40.75817996357442 , 30.34700452880861),
map: map,
title: "deneme2!",
draggable: true
});
Yukarıdaki şekilde bir marker oluştuşturarak istediğimiz bir noktaya işaretçi koyabiliriz.
icon: standart Google Maps simgesi yerine istediğiniz bir simge koyabilirsiniz.
title: Simgenin üzerine gelindiğinde yazacak yazıyı belirtir.
draggable: Bu özelliğin true olması halinde simgeyi sürüklenebilir yapar ancak varsayılanı false'dur. Bu nedenle hiç kullanmayabilirsiniz.
INFOWINDOW: Marker (işaretleyici) nesnesine tıklandığında çıkacak bilgi kutusu
var infowindow1 = new google.maps.InfoWindow({
content: 'Bur bir işaretçi'
})
InfoWindow'un pek bir özelliği yok content dışında. Content ile InfoWindow'da yazacak metni belirleyebilirsiniz. Tek tırnak (') lar arasında yazacağınız bu metni html taglarıyla zenginleştirebilirsiniz ('<b>Bur bir işaretçi</b> ile kalınlaştırabilirsiniz örneğin). Ancak bu işaretçiye tıkladığınızda size bir bilgi kutusu göstermez. Bilgi kutusunu görebilmek için bir Listener (dinleyici) oluşturuyoruz. Aşağıda oluşturulmuş Listener ile marker nesnesine tıklandığında (click olayı) function() içerindeki kodlar çalışacaktır.
google.maps.event.addListener(marker,'click',function(){
infowindow1.open(map,marker);
})
Tüm bunlar Google Maps'in kendi dökümantasyonundan yararlanılarak oluşturulmuştur. Türkçe kaynak sıkıntısı çekenlere umarım bir faydası dokunmuştur. Daha fazla bilgi için aşağıdaki kaynaklara göz atmalısınız.
Google Maps Kullanan Site Örnekleri
Basit Örnekler
Google'ın Maps Ana Dökümanı
Bunların dışında Google Maps'i bir masaüstü uygulamasında nasıl kullanabilirim tarzında sorularla karşılaştım. Benzer soruları olanlar için şayet .Net kullanıyorlarsa webBrowser nesnesi ile bunu yapabilirler sanırım.
6 Response to "Google Maps API Kullanımı"
Yorum Gönder