Google Map Kullanarak Harita Tasarlamak

Transkript

1 Google bazı ürünlerini kısıtlı kullanım alanlarından sıyırıp yaratıcı ellere teslim ederek hem kendisine duyulan sempatiyi arttırıyor hem de biz kullanıcılara yeni kullanım alanları açabiliyor. Mesela Google Map'i kendinize göre özelleştirebilirsiniz, isterseniz Google Map'i kullanarak kendi sitenize de bir harita koyabilirsiniz. Hatta istediğiniz koordinatlara resimler koyup üzerlerine tıklandığında bilgi mesajları çıkmasını sağlayabilirsiniz. Tüm bunlar için yapılması gereken ilk iş sitenizi Google'a kayıt ettirmek, böylece sitenizde bir Google haritası yayınlanmasına izin verilecek. Kayıt işlemi için aşağıdaki adres'e gitmek gerekiyor: Bundan sonrası Google'ın sayfalarında ayrıntılı olarak anlatılmış: code.google.com/apis/maps/documentation/index.html adresine kayıt olmak için google hesabı (mail hesabı) gerekiyor. Hesaba girdikten sonra aşağıdaki gibi bir sayfa ile karşılaşıyorsunuz. 1

2 2

3 3

4 Thank You for Signing Up for a Google Maps API Key! Your key is: ABQIAAAA6j3VMSV9UmmUFtzLhzZhVxRYv3kezhNjA8FABQIAAAA6j3VMSV9UmmUFtzLhzZhVxRYv3kezhNjA8F This key is good for all URLs consisting of this registered domain (and directory if applicable): Note: for more information on the API key system, consult How you use your key depends on what Maps API product or service you use. Your key is valid for use within the entire family of Google Maps API solutions. The following examples show how to use your key within the Maps API product family. Böylece kullanmak istediğimiz site için maps.google dan gerekli izni almış olduk. Aşağıda linki verilen sayfadan basit, örnek bir maps sayfasının HTML olarak entegrason örneğini bulabilirsiniz: <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" 4

5 <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>google Maps JavaScript API Example</title> <script src=" 6j3VMSV9UmmUFtzLhzZhVxRYv3kezhNjA8F&sensor=true_or_false" type="text/javascript"></script> <script type="text/javascript"> var map = new GMap2(document.getElementById("map_canvas")); map.setuitodefault(); </script> </head> <body onload="initialize()" onunload="gunload()"> <div id="map_canvas" style="width: 500px; height: 300px"></div> </body> </html> Kod üzerinde açıklama yapacak olursak: Maps API yi Javascript script tag kullanarak sayfaya eklemiş olduk. (<script src=" Haritanın çıkacağı alan için bir div tanımlayıp ismini (id) "map_canvas" vermiş olduk. Harita oluşturmak için bir java script fonksiyon kullanmış olduk. (function initialize()) map.setcenter(glatlng( , ), 13); komutu yardımı ile haritanın merkezini gps adresi olarak tanımlamış olduk. 5. Ve haritayı sayfaya eklemek için onload eventına initialize() fonksiyonunu çağırmasını söylemiş olduk Bu kodun sonucunda alacağımız görüntü: Haritalar ve İşağretciler (map-makers) Harita üzerinde herhangi bir noktaya harita işağretcisi (map-makers) koymak için initalize() fonksiyonumuzda şu değişikliği yapıyoruz: var map = new GMap2(document.getElementById("map_canvas")); //map.setuitodefault(); var point = new GLatLng( , ); map.addoverlay(new GMarker(point)); 5

6 var point = new GLatLng( , ); map.addoverlay(new GMarker(point)); Yukardaki iki satırdan eklemek istediğiniz işağretci kadar kodlarınıza ekleme yapmalısınız. Harita Tipleri: G_NORMAL_MAP - Normal yol haritası G_SATELLITE_MAP - Uydu görüntüsü G_HYBRID_MAP - Hem normal yol haritası hem uydu görüntüsü G_DEFAULT_MAP_TYPES - Bu üç harita tipinin olduğu harita seçeneği G_PHYSICAL_MAP Fiziksel harita G_SATELLITE_MAP var map = new GMap2(document.getElementById("map_canvas")); map.setmaptype(g_satellite_map); //map.setuitodefault(); var point = new GLatLng( , ); map.addoverlay(new GMarker(point)); 6

7 G_HYBRID_MAP var map = new GMap2(document.getElementById("map_canvas")); map.setmaptype(g_hybrid_map); //map.setuitodefault(); var point = new GLatLng( , ); map.addoverlay(new GMarker(point)); Haritalar ve İşağretciler-Bilgilendirme Pencereleri var map; map = new GMap2(document.getElementById("map_canvas")); map.setmaptype(g_satellite_map); var point = new GLatLng( , ); 7

8 map.addoverlay(new GMarker(point)); map.openinfowindow(map.getcenter(), document.createtextnode("merhaba millet")); function animate() { map.panto(new GLatLng( , )); Aşağıdaki satır haritanın merkezine bir işağretçi ve Merhaba millet şeklinde bir konusma baloncugu yerlestirecektir. map.openinfowindow(map.getcenter(), document.createtextnode("merhaba millet")); Aşağıdaki örnekte özel bir sürüklenebilir işağretciyi haritaya eklenmiştir: var map; //Harita nesnesi map = new GMap2(document.getElementById("map_canvas")); //Harita Tipi map.setmaptype(g_satellite_map); //Baslangic koordinat ve zoom değerleri //Haritanın ortasına koyulan işağretçi var Koordinat = new GLatLng(map.getCenter()); Isagretci1=new GMarker(Koordinat); map.addoverlay(isagretci1); //Özel işağretçi tanımlaması var Sembol = new GIcon(); Sembol.image = " Sembol.shadow = " Sembol.iconSize = new GSize(12, 20); Sembol.shadowSize = new GSize(22, 20); 8

9 Sembol.iconAnchor = new GPoint(6, 20); Sembol.infoWindowAnchor = new GPoint(5, 1); //Belirtilen koordinatlara koyulan özel işağretçi var Koordinat = new GLatLng( , ); Isagretci2=new GMarker(Koordinat, {draggable: true, icon:sembol); map.addoverlay(isagretci2); Şu econym.googlepages.com/geicons.htm adreste google iconları hakkında bir liste mevcut. Haritalar ve Etkileşim click, dblclick, singlerightclick, mouseover gibi etkileşimler ve daha fazlasını google referanslarından öğrenebilirsiniz. Aşağıdaki örnek harita üzerinde çift tıklanan noktanın GPS koordinatlarını gösterecek ve tıklanan yere bir işağretçi ekleyecektir. var map; //Harita nesnesi map = new GMap2(document.getElementById("map_canvas")); //Harita Tipi map.setmaptype(g_satellite_map); //Baslangic koordinat ve zoom değerleri //Belirtilen koordinatlara koyulan işağretçi var Koordinat = new GLatLng( , ); Isagretci=new GMarker(Koordinat); map.addoverlay(isagretci); 9

10 //Açıklama baloncuğu eklemek map.openinfowindow(map.getcenter(), document.createtextnode("merhaba millet")); //Harita üzerinde çift tıklanınca çalışan olaylar GEvent.addListener(map, "dblclick", function(overlay, point) { //Ekrana tıklanan koodinatların verilmesi alert(point); //Eklenen isagretcinin tıklanan yere kaydırılması Isagretci.setPoint(point); ); //Haritaya çift tıklayınca zoom yapması önleniyor. map.disabledoubleclickzoom(); Hartitalar için çeşitli etkileşimler mevcuttur: GMap2.disableDragging() Haritanın kaydırılmasını engeller GMap2.setCenter() Harita merkezini belirler GMap2.panTo Belirtilen noktaya haritayı kaydırır GMap2.zoomIn() Belirtilen yaklaşma veya uzaklaşma seviyesine çeker panto uygulaması: <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 10

11 <title>google Maps JavaScript API Example</title> <script src=" type="text/javascript"></script> <script type="text/javascript"> var map; map = new GMap2(document.getElementById("map_canvas")); map.setmaptype(g_satellite_map); var point = new GLatLng( , ); map.addoverlay(new GMarker(point)); function animate() { map.panto(new GLatLng( , )); </script> </head> <body onload="initialize()" onunload="gunload()"> <div id="map_canvas" style="width: 500px; height: 300px"></div> <input type="button" value="kaydır!" onclick="animate()" /> </body> </html> Haritalar ve Kontrol Araçları Haritanın sol üst köşesinde görünecek olan yön tuşları ve zoom tuşlarının oluşturulması The Maps API haritalarınızda kullanabilceğiniz kullanışlı birkaç kontrol aracı ile beraber gelir. Bunlar: GLargeMapControl3D - a large pan/zoom control as now used on Google Maps. Appears in the top left corner of the map by default. GLargeMapControl - a simpler large pan/zoom control. Appears in the top left corner of the map by default. 11

12 GSmallMapControl - a smaller pan/zoom control. Appears in the top left corner of the map by default. GSmallZoomControl3D - a small zoom control (with no panning controls) as now used on Google Maps. GSmallZoomControl - a small zoom control (no panning controls) used in the small map blowup windows used to display driving directions steps on Google Maps. GScaleControl - a map scale GMapTypeControl - buttons that let the user toggle between map types (such as Map and Satellite) GHierarchicalMapTypeControl - a selection of nested buttons and menu items for placing many map type selectors. GOverviewMapControl - a collapsible overview map in the corner of the screen var map; //Harita nesnesi map = new GMap2(document.getElementById("map_canvas")); //Harita Tipi map.setmaptype(g_satellite_map); //Baslangic koordinat ve zoom değerleri //Harita Zoom ve Kaydırma Aracları map.addcontrol(new GLargeMapControl()); //Harita Zoom ve Kaydırma Aracları (Api versiyona dikkat 2.144a) map.addcontrol(new GLargeMapControl3D()); //Harita Tipi Secenekleri map.addcontrol(new GMapTypeControl()); //Menu seklinde açılan Harita Tipi map.addcontrol(new GMenuMapTypeControl()); Haritalar ve Arama Kutucuğu <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 12

13 <title>google Maps JavaScript API Example</title> <script src=" type="text/javascript"></script> <script src=" type="text/javascript"></script>  <script src=" type="text/javascript"></script> <style url(" </style>  <script type="text/javascript"> var map; //Harita nesnesi map = new GMap2(document.getElementById("map_canvas")); //Harita Tipi map.setmaptype(g_satellite_map); //Baslangic koordinat ve zoom değerleri //Harita Zoom ve Kaydırma Aracları (Api versiyona dikkat 2.144a) map.addcontrol(new GLargeMapControl3D()); //Menu seklinde açılan Harita Tipi map.addcontrol(new GMenuMapTypeControl()); //Harita üzerine arama kutucugu, yukarıdaki HTML kısımları eklemeyi unutmayın map.addcontrol(new google.maps.localsearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20))); //Harita üzerindeki arama kutucugu için gerekli GSearch.setOnLoadCallback(initialize); </script> </head> <body onload="initialize()" onunload="gunload()"> <div id="map_canvas" style="width: 500px; height: 300px"></div> <input type="button" value="kaydır!" onclick="animate()" /> </body> </html> 13

14 Kullandığımız kodlar: <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>google Maps JavaScript API Example</title> <script src=" type="text/javascript"></script> <script src=" type="text/javascript"></script>  <script src=" type="text/javascript"></script> <style url(" </style>  <script type="text/javascript"> var map; //Harita nesnesi map = new GMap2(document.getElementById("map_canvas")); //Harita Tipi map.setmaptype(g_satellite_map); //Baslangic koordinat ve zoom değerleri 14

15 //Harita Zoom ve Kaydırma Aracları map.addcontrol(new GLargeMapControl()); //Harita Zoom ve Kaydırma Aracları (Api versiyona dikkat 2.144a) map.addcontrol(new GLargeMapControl3D()); //Harita Tipi Secenekleri map.addcontrol(new GMapTypeControl()); //Menu seklinde açılan Harita Tipi map.addcontrol(new GMenuMapTypeControl()); //Harita üzerine arama kutucugu, yukarıdaki HTML kısımları eklemeyi unutmayın map.addcontrol(new google.maps.localsearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20))); //Haritanın ortasına koyulan işağretçi var Koordinat = new GLatLng(map.getCenter()); Isagretci1=new GMarker(Koordinat); map.addoverlay(isagretci1); //Özel işağretçi tanımlaması var Sembol = new GIcon(); Sembol.image = " Sembol.shadow = " Sembol.iconSize = new GSize(12, 20); Sembol.shadowSize = new GSize(22, 20); Sembol.iconAnchor = new GPoint(6, 20); Sembol.infoWindowAnchor = new GPoint(5, 1); //Belirtilen koordinatlara koyulan özel işağretçi var Koordinat = new GLatLng( , ); Isagretci2=new GMarker(Koordinat, {draggable: true, icon:sembol); map.addoverlay(isagretci2); //Açıklama baloncuğu eklemek map.openinfowindow(map.getcenter(), document.createtextnode("merhaba millet")); //Harita üzerinde çift tıklanınca çalışan olaylar GEvent.addListener(map, "click", function(overlay, point) { //Ekrana tıklanan koodinatların verilmesi alert(point); //Eklenen isagretcinin tıklanan yere kaydırılması Isagretci2.setPoint(point); ); //Haritaya çift tıklayınca zoom yapması önleniyor. map.disabledoubleclickzoom(); //Harita üzerindeki arama kutucugu için gerekli 15

16 GSearch.setOnLoadCallback(initialize); //Belirtilen koordinatlara haritayı kaydırmak function animate() { map.panto(new GLatLng( , )); </script> </head> <body onload="initialize()" onunload="gunload()"> <div id="map_canvas" style="width: 500px; height: 300px"></div> <input type="button" value="kaydır!" onclick="animate()" /> </body> </html> Haritalara XML ile veri aktarımı var map = new GMap2(document.getElementById("map_canvas")); map.addcontrol(new GSmallMapControl()); map.addcontrol(new GMapTypeControl()); map.setcenter(new GLatLng( , ), 13); // Download the data in data.xml and load it on the map. The format we // expect is: // <markers> // <marker lat="37.441" lng=" "/> // <marker lat="37.322" lng=" "/> // </markers> GDownloadUrl("data.xml", function(data, responsecode) { var xml = GXml.parse(data); var markers = xml.documentelement.getelementsbytagname("marker"); for (var i = ; i < markers.length; i++) { var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parsefloat(markers[i].getattribute("lng"))); map.addoverlay(new GMarker(point)); ); Tıklanan koordinat hakkında bilgi veren google uygulaması: 16

17 var map; var geocoder; var address; map = new GMap2(document.getElementById("map_canvas")); map.setcenter(new GLatLng( , ), 15); map.addcontrol(new GLargeMapControl); GEvent.addListener(map, "click", getaddress); geocoder = new GClientGeocoder(); function getaddress(overlay, latlng) { if (latlng!= null) { address = latlng; geocoder.getlocations(latlng, showaddress); function showaddress(response) { map.clearoverlays(); if (!response response.status.code!= 200) { alert("status Code:" + response.status.code); else { place = response.placemark[]; point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[]); marker = new GMarker(point); map.addoverlay(marker); marker.openinfowindowhtml( '<b>orig latlng:</b>' + response.name + '<br/>' + '<b>latlng:</b>' + place.point.coordinates[1] + "," + place.point.coordinates[] + '<br>' + '<b>status Code:</b>' + response.status.code + '<br>' + '<b>status Request:</b>' + response.status.request + '<br>' + '<b>address:</b>' + place.address + '<br>' + '<b>accuracy:</b>' + place.addressdetails.accuracy + '<br>' + '<b>country code:</b> ' + place.addressdetails.country.countrynamecode); 17

18 Daha fazla özellik için buradan code.google.com/apis/maps/documentation/reference.html google Api referansına bakabilirsiniz. 18