Bunun için ilk olarak Google hesabımız
olması gerekiyor. Ve apiyi kullanabilmemiz için bir key almamız gerekiyor. Bu çok da önemli bir şey değil. Çünkü ben rasgele web sitesi ismi yazarak da bu keyi aldım. Localhostta harita sorunsuz çalışıyor. Fakat yine de gerçek veri yazabiliyor isek yazmak lazım.Aksi takdirde her sayfa açılışında alert alabiliriz.
http://code.google.com/apis/maps/signup.html adresinden keyi alabilirsiniz.
Key aldıktan sonra yapmanız gereken aşağıdaki kodu sayfanızda head tagleri arasına yerleştirmeniz.
Daha sonra yapmamız gereken ilk iş haritamızın yerleşecegi div bolgesini ayarlamak.
yazarak div bölgesini ayarlayabiliyoruz. Bu bölge herhangi bir tablonun gözü olabilir, sayfanın en uç noktası, en başı olabilir bu size kalmış. Daha sonra bu div bölgesine haritayı basmamız gerekiyor. Onun için artık javascript metodumuzu yazmamız gerek.
Yukarıdaki javascript kodunu head tagleri arasina yerlestiriyoruz. Burada yapılan iş map_canvas div bolgesine haritayı basmak ve harita ilk açıldığında merkez olarak alınacak koordinatın map.setCenter metodu ile belirlenmesi.
GMap Clasına ait olan setCenter metodu görüldüğü gibi GLatLng sınıfına ait bir obje almış. Bu objeyi bir koordinat objesi olarak nitelendirebiliriz.
Kodu su sekilde de yazabilirdik:
GLatLng classının constr. ilk parametresi enlem, 2.si boylam buna dikkat!!!
var a = new GLatLng(41.028,28.903);
map.setCenter(a,13);
Buradaki 13 sayisi ise zoom seviyesini gösteriyor. 1 en düşük değer oluyor, 14 en büyük değer oluyor. Bazı durumlarda 15 de geçerli olabiliyor. Çekilen uydu fotoğrafına göre...
Tabi unutmadan bu initialize metodunun sayfa acilirken hemen yuklenmesini istiyor isek body load kismina su sekilde koymamiz lazim:
Bu sekilde haritamizi sayfamiza yuklemis oluyoruz.
Örnek 1 : http://afsungur.googlepages.com/a.html
olması gerekiyor. Ve apiyi kullanabilmemiz için bir key almamız gerekiyor. Bu çok da önemli bir şey değil. Çünkü ben rasgele web sitesi ismi yazarak da bu keyi aldım. Localhostta harita sorunsuz çalışıyor. Fakat yine de gerçek veri yazabiliyor isek yazmak lazım.Aksi takdirde her sayfa açılışında alert alabiliriz.
http://code.google.com/apis/maps/signup.html adresinden keyi alabilirsiniz.
Key aldıktan sonra yapmanız gereken aşağıdaki kodu sayfanızda head tagleri arasına yerleştirmeniz.
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript">
</script>
Daha sonra yapmamız gereken ilk iş haritamızın yerleşecegi div bolgesini ayarlamak.
<div id="map_canvas" style="width: 500px; height: 300px"></div>
yazarak div bölgesini ayarlayabiliyoruz. Bu bölge herhangi bir tablonun gözü olabilir, sayfanın en uç noktası, en başı olabilir bu size kalmış. Daha sonra bu div bölgesine haritayı basmamız gerekiyor. Onun için artık javascript metodumuzu yazmamız gerek.
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(41.028, 28.293), 13);
}
}
</script>
Yukarıdaki javascript kodunu head tagleri arasina yerlestiriyoruz. Burada yapılan iş map_canvas div bolgesine haritayı basmak ve harita ilk açıldığında merkez olarak alınacak koordinatın map.setCenter metodu ile belirlenmesi.
GMap Clasına ait olan setCenter metodu görüldüğü gibi GLatLng sınıfına ait bir obje almış. Bu objeyi bir koordinat objesi olarak nitelendirebiliriz.
Kodu su sekilde de yazabilirdik:
GLatLng classının constr. ilk parametresi enlem, 2.si boylam buna dikkat!!!
var a = new GLatLng(41.028,28.903);
map.setCenter(a,13);
Buradaki 13 sayisi ise zoom seviyesini gösteriyor. 1 en düşük değer oluyor, 14 en büyük değer oluyor. Bazı durumlarda 15 de geçerli olabiliyor. Çekilen uydu fotoğrafına göre...
Tabi unutmadan bu initialize metodunun sayfa acilirken hemen yuklenmesini istiyor isek body load kismina su sekilde koymamiz lazim:
<body onload="initialize()" onunload="GUnload()">
Bu sekilde haritamizi sayfamiza yuklemis oluyoruz.
Örnek 1 : http://afsungur.googlepages.com/a.html
Hiç yorum yok:
Yorum Gönder