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.
|
|
| <script type="text/javascript" src="http://arsiv.pilli.com/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
| 1 | | 2 | | 3 | | 4 | | 5 | | 6 | | 7 | | 8 | | 9 | | 10 | | 11 | | 12 | | 13 | | 14 | | 15 | | 16 | | 17 | | 18 | | 19 | | 20 | | 21 | | 22 | | 23 | | 24 | | 25 | | 26 | | 27 | | 28 | | 29 | | 30 | | 31 | | 32 | | 33 | | 34 | | 35 | | 36 | | 37 | | 38 | | 39 | | 40 | | 41 | | 42 | | 43 | | 44 | | 45 |
|
| 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> |
|
