Konular
Videolar
Sunular
Testler

Google Map 3.0 ile Directions (Yol Tarifi Kullanımı)

Örnek Uygulamamızda API 3.0 kullandık ve Google Mapsle nasıl yol tarifi uygulaması hazırlanabilir göstermek istedik.

Google Map 3.0 ile Directions (Yol Tarifi Kullanımı)

Tüm Kodlama:

 


   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />


        <script type="text/javascript"
               src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
       
            var map;
            var directionsService;
            var directionsRenderer;
           
            function initialize() {
                map = new google.maps.Map(document.getElementById("map_canvas"), {
                    zoom: 7,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: new google.maps.LatLng(-33.868011, 151207566)
                });
 
                directionsRenderer = new google.maps.DirectionsRenderer();
                directionsRenderer.setMap(map);    
                directionsRenderer.setPanel(document.getElementById('directions'));
 
                directionsService = new google.maps.DirectionsService();
               
                Form=document.forms['harita'];
                YolTarifi(Form.elements['nerden'].value, Form.elements['nereye'].value);
           
            }
       
            function YolTarifi(Nerden, Nereye) {
                var request = {
                    origin: Nerden,
                    destination: Nereye,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING,
                    unitSystem: google.maps.DirectionsUnitSystem.METRIC
                };
           
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsRenderer.setDirections(response);
                    } else {
                        alert('Yol Tarifi Oluşturulamadı');
                    }
                });
            }
 
       
        </script>

    </head>
    <body onload="initialize()">

        <form name="harita" action="#">

            <table>
                <tr><th align="right">Nerden :</th>
                    <td><input type="text" size="25" name="nerden" value="mersin" /></td>
                    <th align="right">Nereye</th>
                    <td align="right"><input type="text" size="25"  name="nereye" value="malatya" /></td>
                    <th>
                        <input name="submit" type="button" value="Yol Haritasını Göster" onclick="YolTarifi(document.forms['harita'].elements['nerden'].value, document.forms['harita'].elements['nereye'].value)" />
                    </th>
                </tr>
            </table>

        </form>

        <br/>
        <table class="directions">
            <tr>
                <td valign="top"><div id="directions" style="width: 275px"></div></td>
                <td valign="top"><div id="map_canvas" style="width: 310px; height: 400px"></div></td>
            </tr>
        </table>

    </body>
</html>
 

 

Javascript Kısmı:

 

            var map;
            var directionsService;
            var directionsRenderer;
           
            function initialize() {
                map = new google.maps.Map(document.getElementById("map_canvas"), {
                    zoom: 7,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: new google.maps.LatLng(-33.868011, 151207566)
                });
 
                directionsRenderer = new google.maps.DirectionsRenderer();
                directionsRenderer.setMap(map);    
                directionsRenderer.setPanel(document.getElementById('directions'));
 
                directionsService = new google.maps.DirectionsService();
               
                Form=document.forms['harita'];
                YolTarifi(Form.elements['nerden'].value, Form.elements['nereye'].value);
           
            }
       
            function YolTarifi(Nerden, Nereye) {
                var request = {
                    origin: Nerden,
                    destination: Nereye,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING,
                    unitSystem: google.maps.DirectionsUnitSystem.METRIC
                };
           
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsRenderer.setDirections(response);
                    } else {
                        alert('Yol Tarifi Oluşturulamadı');
                    }
                });
            }

 

 

Kaynaklar:

36,249 Okunma Henüz yorum yapılmamış 06/12/2011 00:28:19

Yorumunuzu Ekleyin

Google Map Kullanarak Harita Tasarlamak

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.

35,243 Okunma 10 Yorum 31/03/2008 05:44:04

Google Map Api 3.0

Google Maps API 3 resmi API artık. Versiyon 2 API artık resmi olarak önerilmilyor.V2 ile yaptığınız uygulamalarınızı V3 için güncellemeniz gerekli. V3 'ün en büyük özelliği mobil cihazlara göre düzenlenmiş olması ve API keyin artık gerekli olmayışı

25,503 Okunma 5 Yorum 14/07/2011 18:51:25 30/10/2012 04:04:12

Kurumsal Mail Hizmeti İçin Google Kullanmak

Bir host hizmetinden aldığınız mail adresini gmaile yönlendirerek nasıl kullanabileceğinizi anlatan bir makale...

21,589 Okunma Henüz yorum yapılmamış 12/04/2013 02:03:49 16/04/2013 02:10:39

Google Docs

Paylaş

17,104 Okunma Henüz yorum yapılmamış 21/02/2012 09:05:37

Youtube Videosunu Kullanmak

Bir youtube videosunun özellikleri

10,039 Okunma Henüz yorum yapılmamış 29/08/2014 00:52:17 08/12/2015 00:52:34

Google Adwords API Kullanımı

Google Reklamlarını yönetmek için Google Adwords API'yi kullanmalısınız.

6,950 Okunma Henüz yorum yapılmamış 25/07/2018 17:52:58 26/07/2018 17:52:55

Google Site İçi Arama Motoru

Bir web siteniz var ve ziyaretçilerinizin siteniz içerisinde arama yapmasını istiyorsanız google Custom Search Api kullanmalısınız.

6,672 Okunma Henüz yorum yapılmamış 29/06/2018 22:43:17 30/06/2018 01:48:54

Yükleniyor...