.:: Jasa Membuat Aplikasi Website,Desktop,Android Order Now..!! | | Order Now..!! Jasa Membuat Project Arduino,Robotic,Print 3D ::.

Membuat Rute pada Web Peta Google Map, Draggable Directions GoogleMap

0 komentar


بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Assalamu'alaikum warahmatullahi wabarakatuh

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.

Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com


atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين
Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
wassalamualaikum warahmatullahi wabarakatuh


Artikel Membuat Rute pada Web Peta Google Map, Draggable Directions GoogleMap, Diterbitkan oleh scodeaplikasi pada Jumat, 15 Maret 2013. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.

Tawk.to