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:

Yorumunuzu Ekleyin


Yükleniyor...
Yükleniyor...