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:

32,294 Okunma 0 Yorum 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.

32,407 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ışı

22,802 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...

18,973 Okunma 0 Yorum 12/04/2013 02:03:49 16/04/2013 02:10:39

Google Docs

Paylaş

15,020 Okunma 0 Yorum 21/02/2012 09:05:37

Google Adwords API Kullanımı

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

4,238 Okunma 0 Yorum 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.

3,947 Okunma 0 Yorum 29/06/2018 22:43:17 30/06/2018 01:48:54

Yükleniyor...