Bu makalemizde google map kullanımını inceleyeceğiz. Yapacağımız örnekte harita üzerinde bir noktaya tıkladığımızda o bölgenin adresini alacağız.
- Yazılım Uzmanları
- 13 Mayıs 2018
- 2983 kez görüntülendi.
Bu makalemizde google map kullanımını inceleyeceğiz. Yapacağımız örnekte harita üzerinde bir noktaya tıkladığımızda o bölgenin adresini alacağız.
Google map i web sayfalarımızda kullanabilmemiz için öncelikle google dan alan adımıza göre bir key generate ettirmeliyiz. Bu işlem için http://code.google.com/intl/tr-TR/apis/maps/signup.html adresten alan adınıza göre key oluşturmanız gerekmektedir. Biz burada www.yazilimuzmanlari.com için key üretip bu uygulamayı çalıştırdık. Yapacağınız uygulamayı localhost ta test edecekseniz burada localhost için key üretmeniz gerekmekte. Aksi takdirde uygulamanızda herhangi bir sonuç alamazsınız.
Bu işlemi yaptıktan sonra sayfamızın head kısmına aşağıdaki scripti eklememiz gerekmektedir.
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQ****************" type="text/javascript"></script>
Bu script içerisinde key den sonraki bölüm google da ürettiğimiz key i yazmamız gerekmektedir. Google haritalarını kullanırken bilmemiz gereken bir kaç ayrıntı bulunmakta. Bu lat ve long yani enlem ve boylamlardır. Bunları google maps uygulamaları geliştirdikçe görüntülediğiniz bölgenin lat ve long larını alabildiğinizi göreceksiniz. Diğer konu ise yakınlık (zoom). Haritamızın hangi enlem ve boylamı görüntüleyeceği ve ne kadar yaklaşacağını belirlememiz gerekmekte. Haritayı oluştururken bu değerleri gireceğiz. İstanbul un enlem ve boylamı 41.05, 28.89
Bu bilgilerden aşağıdaki script imize geçelim.
<script type="text/javascript">
var map = null;
var geocoder = null;
//Bu bölümde haritamızı oluşturuyoruz.
function initialize() {
if (GBrowserIsCompatible()) {
//haritamızın web sayfamızdaki map_canvas divinde görüntülenmesini sağlıyoruz.
map = new GMap2(document.getElementById("map_canvas"));
//Haritamız istanbul un koordinatlarına konumlayarak yakınlaştırıyoruz. 17 en yakın 0 en uzak
map.setCenter(new GLatLng(41.05, 28.89), 10);
//Haritamıza Yaklaş Uzaklaş butonları ekliyoruz.
map.addControl(new GSmallZoomControl());
geocoder = new GClientGeocoder();
//Haritamıza mouse ile tıklandığında hangi fonksiyona gideceğini belirtiyoruz.
GEvent.addListener(map, "click", clicked);
//harita üzerinde mesaj balonu açıyoruz ve haritaya tıklayın mesajını yazdırıyoruz.
map.openInfoWindow(map.getCenter(), "Haritaya Tiklayin!");
}
}
function clicked(overlay, latlng) {
//tıklanan koordinatlar latlng değişkeninin içerisinde bulunmaktadır.
//bu değerin düzgün geldiğini kontrol ediyoruz
if (latlng) {
//koordinatların adresini alıyoruz.
geocoder.getLocations(latlng, function(addresses) {
if(addresses.Status.code != 200) {
alert("Adres bilgisi alınırken hata oluştu. " + latlng.toUrlValue());
}
else {
//Adres bilgisi düzgün geldi ise mesaj balonuyla gelen adresi ekranda gösteriyoruz.
//Bu bölümde Web Service kullanarak dilerseniz adresi tıklayan kullanıcının
//Adres kısmına yazabilirsiniz.
address = addresses.Placemark[0];
var myHtml = address.address;
map.openInfoWindow(latlng, myHtml);
}
});
}
}
</script>
son olarak html imizin nasıl olacağına bakalım.
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
İyi çalışmalar dilerim.
Bu yazıya 0 yorum yapılmış.