---

.

---

---

Metode dan Algoritma | Membuat Rute pada Web Peta Google Map, Draggable Directions GoogleMap . Anda bisa melakukan konsultasi tentang Membuat Rute pada Web Peta Google Map, Draggable Directions GoogleMap melalui form di samping kanan !!!

---

Kemarin penulis mendapat script yang sangat menarik untuk Membuat Web Peta Google Map yang memiliki Fitur Rute (Directions) dengan titik awal dan titik akhir yang dapat diatur dan dapat di drag (digeser dengan mouse) atau istilahnya draggable.

Yang cukup mengagumkan ternyata jalan terdekat (rute directions) nya pun dapat didrag pada simpul-simpul jalannya sehingga dapat membuat alternatif jalan yang lain yang melewati titik yang telah kita tentukan.

Scriptnya sebagai berikut :

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

sensor=false"></script>

<script type="text/javascript">

  var directionsDisplay;

  var directionsService = new google.maps.DirectionsService();

  var map;

  var oldDirections = [];

  var currentDirections = null;

  function initialize() {

    var myOptions = {

      zoom: 12,

      center: new google.maps.LatLng(-7.805155310233364,110.36424198305053),

      mapTypeId: google.maps.MapTypeId.ROADMAP

    }

    map = new google.maps.Map(document.getElementById("map_canvas3"), 

myOptions);

    directionsDisplay = new google.maps.DirectionsRenderer({

        'map': map,

        'preserveViewport': true,

        'draggable': true

    });

    directionsDisplay.setPanel(document.getElementById("directions_panel"));

    google.maps.event.addListener(directionsDisplay, 'directions_changed',

      function() {

        if (currentDirections) {

          oldDirections.push(currentDirections);

          setUndoDisabled(false);

        }

        currentDirections = directionsDisplay.getDirections();

      });

    setUndoDisabled(true);

    calcRoute();

  }

  function calcRoute() {

    var start = 'Kraton Yogyakarta, Yogyakarta';

    var end = '-7.782726399860902,110.40125352935797';

    var request = {

        origin:start,

        destination:end,

        travelMode: google.maps.DirectionsTravelMode.DRIVING

    };

    directionsService.route(request, function(response, status) {

      if (status == google.maps.DirectionsStatus.OK) {

        directionsDisplay.setDirections(response);

      }

    });

  }

  function undo() {

    currentDirections = null;

    directionsDisplay.setDirections(oldDirections.pop());

    if (!oldDirections.length) {

      setUndoDisabled(true);

    }

  }

  function setUndoDisabled(value) {

    document.getElementById("undo").disabled = value;

  }

  google.maps.event.addDomListener(window, 'load', initialize);

</script>

<div id="map_canvas3" style="float:left;width:300px;height:300px"></div>

<div style="float:right;width:30%;height:100%;overflow:auto">

  <button id="undo" style="display:block;margin:auto" onclick="undo()">Undo

  </button>

  <div id="directions_panel" style="width:200"></div>

</div>

Copy paste code di atas, kemudian save sebagai file *.html, kemudian jalankan di browser.

Semoga bermanfaat.

---

ActionScript AS3 ASP.NET AJAX C / C++ C# Clipper COBOL ColdFusion DataFlex Delphi Emacs Lisp Fortran FoxPro Java J2ME JavaScript JScript Lingo MATLAB Perl PHP PostScript Python SQL VBScript Visual Basic 6.0 Visual Basic .NET Flash MySQL Oracle Android

---

Related Post :

---

Judul: Membuat Rute pada Web Peta Google Map, Draggable Directions GoogleMap
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh hank2

Anda sedang membaca artikel tentang Membuat Rute pada Web Peta Google Map, Draggable Directions GoogleMap, Semoga artikel tentang Membuat Rute pada Web Peta Google Map, Draggable Directions GoogleMap ini sangat bermanfaat bagi teman-teman semua, jangan lupa untuk mengunjungi lagi melalui link Membuat Rute pada Web Peta Google Map, Draggable Directions GoogleMap.

---