Google Maps Api v3 ile Tıklanan Noktalar Arası Yol Tarifi Alma

Jan 06,2011 00:00 by canawar
Önce apimizi HTML e ekliyoruz.


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">script>

Bu arada yeni çatı ile artık alan adınızı kayıt ettirmenize gerek kalmıyor, direk kullanabiliyoruz.
Gerekli kodlar ise şu şekilde

var 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ğız
directionsService = new google.maps.DirectionsService(); //Bu satır ile yön tarifi hizmetini kullacağımızı belirtiyoruz
var adimlar;
var istanbul = new google.maps.LatLng(41.01521967187517, 28.98130334943846);//haritamızın merkezini belitiyoruz
var 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 veriyoruz
var 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 veriliyor
stepDisplay = new google.maps.InfoWindow();
        google.maps.event.addListener(map, 'click', function(event) {// burada tıklama ile alınan koordinatları bir diziye aktarıyoruz
                if(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ıyoruz
    if (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


<body onload="initialize()">
<div id="map_canvas" style="width:80%;height:80%"> </div>
</body>