Google map api (geniş anlatım)

28-03-2009, 17:06:34

Üyeliği durduruldu

siteye baktım ama daha önce detaylı bir şekilde verildiğini görmedim ondan ben yazayım dedim.

Google Maps API sayesinde sitenize bedava Google Haritasını eklemenizi sağlayan javascript kütüphanesidir. Bu sayede mesela okul sitesi yaptınız okulun yerini google map ile gösterebilirsiniz

Başlangıç:
Google amcanın bu hizmetinde yararlanmak için bir Google Map anahtarı (key)oluşturmanız gerekiyor. Sign Up for the Google Maps API - Google Maps API - Google Code adresinden web sitenizin adresini girip belitilen koşulları girmeniz gerekli. Burası önemli çünkü o anahtar sadece sizin sitenizde çalışacaktır. Başka bir sitede çalışmaz ama anahtarı sitenizdeki tüm dizinlerde kullanabilirsiniz. (http://herseyy.com/map/ mesela) aşağıdaki kodları az biraz değiştirerek kendinize uyarlayabilirsiniz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&
key=ABQIAAAAEdmdbN3_LLmNarikN3TrshRJEhM5G8kmHTLX-nVEQd2nxILXrxReVjVzjTtpCiXzXwQM78vLxzqdWQ"
type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

key i değiştirip sizin siteniz için aldığınız key i koymanız lazım
diğer koyu ile işaretlediğim yer olan koordinatları ise Get Lat Lon - find the latitude and longitude of a point on a map adresinden bulabilirsiniz. koordinatların yanındaki 13 sayısı ise büyütme oranıdır. yine aynı sitede Google Maps zoom level: şeklinde yer alıyor.

ayrıca Şunlar ile de extra özellikler katabilirsiniz.Bu fonksiyonları map.setCenter dan sonraki satıra koyarsanız çalışacaktır.

Kontrol Ekleme://küçük yön tuşları ve büyütme küçüktme kontrolü

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

Bilgi Baloncuğu Ekleme//haritanın merkezinde bir baloncuk oluşturur. yazısı ise merhaba dünya oluyor

map.openInfoWindow(map.getCenter(),
document.createTextNode("Merhaba Dünya"));

İşaretleyici Ekleme://bununla da toplu iğne gibi duran bir şekil varya işte onu merkez olarak kabul ettiğiniz yere ekliyebiliyorsunuz.

var marker = new GMarker(map.getCenter(), {draggable: false});
map.addOverlay(marker);

yeterince açıklayıcı olduğunu düşünüyorum ama yine de takıldığınız bir yer olursa sorabilirsiniz.

06-01-2010, 07:22:52

#2