Maps api yeni versiyonu ile birçok nesne isimi değişikliğe uğradı. Yani yeni bir kodlama çatısı oluştu. Bu çatı ile yol tarifi alımı birçok projede kullanılabilir. Aşağıda ise basit sayılan bir örnek ile bu özelliği açıklamaya çalışacağım.Önce apimizi HTML e ekliyoruz.Bu arada yeni çatı ile artık alan adınızı kayıt ettirmenize gerek kalmıyor, direk kullanabiliyoruz.Gerekli kodlar ise şu şekildevar map;var directionDisplay;var directionsService;var stepDisplay;var clicks=[];function initialize() { // body elementine onload=”initialize()” ile bu fonksiyonu göstererek sayfa açıldığında yüklenmesini sağlayacağızdirectionsService = new google.maps.DirectionsService(); //Bu satır ile yön tarifi hizmetini kullacağımızı belirtiyoruzvar adimlar;var istanbul = new google.maps.LatLng(41.01521967187517, 28.98130334943846);//haritamızın merkezini belitiyoruzvar myOptions = {zoom: 13,mapTypeId: google.maps.MapTypeId.ROADMAP,center: istanbul}map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);//son olarak haritamızı hengi elemana koyacağımızı ve gerekli özellikleri ile birlikte ekrana veriyoruzvar rendererOptions = {map: map, // hangi haritada çıkacağıdraggable: true, // oluşturulan çiginin sürüklenbilirmi olacağı}directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions) //yön tarifi için gerekli ayarların bu şekilde veriliyorstepDisplay = new google.maps.InfoWindow();google.maps.event.addListener(map, ‘click’, function(event) {// burada tıklama ile alınan koordinatları bir diziye aktarıyoruzif(typeof(clicks[0])==’undefined’){clicks[0]=event.latLng;}else{clicks[1]=event.latLng;calcRoute();// eğer ilk tıklama yapılmış ise 2. yide alıp tarifimiz gösteren fonksiyonu çağırıyoruz}});}function calcRoute() {var start =clicks[0];var end =clicks[1];var request = {origin: start,destination: end,travelMode: google.maps.DirectionsTravelMode.WALKING // WALKING DRIVING yada CYCLING};directionsService.route(request, function(response, status) {// tarif için gerekli isteğimizi yapıyoruzif (status == google.maps.DirectionsStatus.OK){directionsDisplay.setDirections(response);}});}
Açıklamaları genellikle kod içinde vermeye çalıştım. Harita ve yön tarifi için gerekli ayarları koyduğumuz değişkenlerde, özellik sayısı arttırılabilir. Burada kaynak olarak Apinin kendi sayfası kullanılabilir.Bu kodlar “head” etiketleri arasına eklendikten sonra “body” taglarımız ise
