Programmer GoBlog: Google Map

Tampilkan postingan dengan label Google Map. Tampilkan semua postingan

Rabu, 09 Desember 2015

Menambahkan rute di peta google map api untuk GIS

Abal abal 10.10 GIS, Google Map 8 komentar

Beberapa hari yang lalu ada salah seorang dari pembaca blog ini mengirimkan email kepada saya menanyakan tentang bagaimana menambahkan atau membuat rute dari gedung A ke gedung B. Atau dari koordinat A ke koordinat B.

Bukanya pelit untuk membalas email, tetapi saya rasa jauh lebih baik jika saya bagikan di blog saja, supaya apabila ada yang membutuhkan tinggal comot di blog ini.

Baiklah langsung saja kita buat rute di web gis google map kita.

Dalam praktik untuk tulisan kali ini saya menggunakan sourcecode dari tulisan sebelumnya di sini dengan sedikit modifikasi tentunya.

Berikut contoh script untuk menampilkan rute pada peta gis google map kita.

<!DOCTYPE html>
<html>
<head>
 <title>ROUTE MAP</title>
 <style type="text/css">
  html, body {
        height: 100%;
        margin: 0;
        padding: 0;
       }
       #map_canvas {
         height: 100%;
       }
 </style>
</head>
<body>
 <div id="map_canvas">  

 </div>



</body>
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>  
<script type="text/javascript">
 //DUA VARIABLE BERIKUT DIPERLUKAN UNTUK RUTE
 var directionsDisplay;
 var directionsService = new google.maps.DirectionsService();


 (function() {  // fungsi untuk dijalankan ketika halaman web dubuka  
   var infowindow = null;  
      
   initialize(); // mengeksekusi fungsi initialize()  
     
  })();  
    
    function initialize() {  

     //BARIS DIBAWAH INI JUGA DIPERLUKAN UNTUK RUTE
     directionsDisplay = new google.maps.DirectionsRenderer();

        // Baris berikut digunakan untuk mengisi marker atau tanda titik di peta  
        var sites = [  
    
         ['Polinela', -5.358725,105.233413 ,1, '<h4>Politeknik Negeri Lampung</h4><p>Keterangan didalam marker</p>'], // pertama merupakan judul market, kedua adalah titik koordinan latitude, ketiga longitude, dan keempat merupakan z index (titik mana yang ditampilkan lebih dulu) untuk menentukan titik mana diatas titik mana, ketiga merupakan isi keterangan marker nya.  
         ['Unila', -5.364505,105.243442 ,2, '<h4>Universitas Lampung</h4><p>Keterangan didalam marker</p>'],  
         ['DJ',-5.3745833,105.2425024,3,'<h4>IBI DARMAJAYA</h4><p>Keterangan untuk marker</p>']
   
        ];  
        var centerMap = new google.maps.LatLng(-5.364505,105.243442); // mengatur pusat peta  
          
        var myOptions = {  
          zoom: 15, // level zoom peta  
          center: centerMap, // setting pusat peta ke centerMap  
          mapTypeId: google.maps.MapTypeId.ROADMAP //menentukan tipe peta  
        }  
    
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //menempatkan peta pada div dengan ID map_canvas di html  

        //BARIS DIBAWAH INI UNTUK MELETAKKAN RUTE PADA MAP "map_canvas" ^
      directionsDisplay.setMap(map);

        setMarkers(map, sites); // memanggil fungsi setMarker untuk menandai titik di peta.  
          
        infowindow = new google.maps.InfoWindow({  
            content: "loading..."  
          });  
    
        var bikeLayer = new google.maps.BicyclingLayer();  
        bikeLayer.setMap(map); //memnunculkan peta  

        //BARIS DIBAWAH INI UNTUK MEMANGGIL FUNGSI calcRoute()
        calcRoute();   
      }  
    
        

        //FUNGSI CALCROUTE UNTUK MENGGAMBAR RUTE DARI TITIK A KE TITIK B / START ke END
        function calcRoute() {
    var start = '-5.358725,105.233413';
    var end = '-5.3745833,105.2425024';
    var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
      }
    });
  }
    
    
     
        function setMarkers(map, markers) {  
         //berikut merupakan perulangan untuk membaca masing masing titik yang telah kita definisikan di sites[];  
        for (var i = 0; i < markers.length; i++) {  
          var sites = markers[i];  
          var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);  
          var marker = new google.maps.Marker({  
            position: siteLatLng,  
            map: map,  
            title: sites[0],  
            zIndex: sites[3],  
            html: sites[4]  
    
          });  
    
          var contentString = "Some content";  
          // berikut merupakan fungsi untuk mengatur agar keterangan marker muncuk ketika mouse diarahkan ke marker (mouse over)  
          google.maps.event.addListener(marker, "mouseover", function () {  
              
            infowindow.setContent(this.html);  
            infowindow.open(map, this);  
          });  
        }  
      }  
    

</script>

</html>

Disetiap Baris yang saya tambahkan untuk memunculkan rute di peta telah saya tambahkan komentar. sehingga sobat bisa membedakan perubahan/modifikasi yang saya buat dari script pada tutorial sebelumnya sehingga bisa menampilkan rute atau track dari satu titik ke titik lain.
sekian, semoga bermanfaat.

Cara Kerja GPS dan prinsip matematika yang diterapkan

Abal abal 15.45 GIS, Google Map, GPS 1 komentar

Setelah beberapa waktu tidak menulis kali ini programmer goBlog kembali dengan membawa sedikit oleh-oleh dari project programming terakhir. Kali ini kita akan berkenalan dengan teknologi GPS atau global positioning sistem. Apa itu GPS? GPS adalah suatu sistem untuk menentukan suatu titik di permukaan bumi menggunakan teknologi satelit.
Yang akan kita bahas pada tulisan kali ini adalah bagaimana sebenarnya prinsip dan cara kerja GPS ini?
Sebelum kita lanjutkan, mungkin anda bertanya tanya apa hubunganya programming dengan GPS sih? well saya yakin telah menerangkan kepada anda pada tulisan sebelumnya bahwa programming bisa masuk ke segala bidang dan tidak terkecuali dengan bidang pemetaan dan geolokasi yang berkaitan erat dengan GPS.

Baiklah, lantas bagaimana prinsip kerja GPS ini? GPS mengadopsi prinsip matematika sederhana yang bernama trilateration. Mahluk apa sebenarnya trilateratrion ini, saya tidak akan menerangkan tentang pengertian dari prinsip ini, tetapi saya akan memberikan ilustrasi tentang cara kerja prinsip ini.

Kita buat sebuah permisalan. Katakanlah anda tersesat disuatu tempat pada peta datar. Bagaimana cara anda tahu dimana lokasi anda? katakanlah ada seorang teman memberitahu anda bahwa anda berada 5.52 KM dari Senayan. Apakah anda tau sekarang anda berada dimana? well, belum jelas tapi anda tahu anda berjarak 5.52 kilometer dari senayan, walaupun anda belum tahu arah selatan barat timur atau utara dari senayan. Gambarlah lingkaran dengan skala 1:100 di peta dengan titik Senayan berada di tengah tengah lingkaran tersebut dengan jari-jari skala dari 5.52 km.

Selanjutnya bayangkan ada satu lagi teman anda yang memberi tahu lokasi anda berada 10 KM dari mall kelapa gading. Gambar satu lagi lingkarang dengan cara yang sama namun kali ini titik tengah berada di mall kelapa gading dengan jari-jari lingkaran skala dari 10KM.

Apakah anda tahu dimana lokasi anda sekarang? belum? coba perhatikan kedua lingkaran yang kita buat, apakah bertemu pada titik tertentu? ya kedua lingkarang tersebut berpotongan di dua lokasi. Nah salah satu dari titik perpotongan lingkaran ini adalah lokasi anda.
Tapi bagaimana cara kita mengetahui lokasi yang mana yang merupakan lokasi kita sebenarnya? nah disinilah peran acuan ketiga.
Sekarang umpamakan ada satu lagi teman anda memberi tahu lokasi keberadaan anda adalah 10.44 KM dari museum sejarah jakarta.

Sekarang gambarlah lingkaran ketiga dengan metode yang sama dengan kedua lingkaran sebelumnya dengan titik pusat lingkaran berada di museum sejarah jakarta dan jari-jari lingkaran adalah skala dari 10.44 KM.

Apakah ketiga lingkaran tersebut berpotongan pada titik yang sama?
Jika jarak yang diberikan oleh ketiga teman anda kita asumsikan tepat, maka anda akan melihat ketiga lingkaran tersebut bertemu di suatu titik yang sama. Nah inilah lokasi anda.

Penjelasan diatas merupakan prinsip kerja dari trilateration, yang mana dapat menentukan lokasi suatu titik dengan bantuan tiga titik yang telah diketahui yaitu senayan, mall kelapa gading dan musem sejarah jakarta, Serta jarak masing masing titik ini ke lokasi keberadaan anda.

Nah prinsip dasar inilah yang kemudian diterapkan pada penentuan lokasi anda di permukaan bumi oleh GPS. Satelit GPS berperan sebagai 'teman' anda yang memberitahu jarak anda dengan satelit tersebut. Dan seperti kasus diatas, anda juga membutuhkan setidaknya 3 atau lebih satelit yang mengetahui atau dapat dijangkau oleh penerima GPS atau GPS receiver milik anda.
Seperti yang sudah kita tahu bahwa kita memerlukan setidaknya 3 Satelit yang dapat dijangkau oleh GPS Receiver kita agar dapat menentukan lokai kita dengan tepat, lalu bagaimana bisa ada tiga satelit yang dapat menjangkau kita sedangkan bumi kan berputar? ya kita harus menambah jumlah satelitnya. Setidaknya ada 24 satelit yang mengelilingi bumi untuk dapat memenuhi syarat agar minimal 4 Satelit dapat dijangkau dari setiap tempat di permukaan bumi pada setiap saat.

Pada awalnya GPS merupakan teknologi yang dikembangkan oleh militer amerika untuk keperluan militer, namun saat ini teknologi GPS sudah dapat dinikmati oleh sipil. Ada banyak sekali Teknologi GPS di dunia ini diantaranya GPS milik amerika, GLONAS dari RUSIA, dan Galielo dari Eropa dan masih banyak lagi.

Menambahkan dan menampilkan data dari database ke peta google map

Abal abal 02.07 GIS, Google Map 58 komentar

Halo sahabat programmer..
Mari kita lanjutkan lagi belajar kita tentang membuat web gis dengan memanfaatkan google map. tutorial ini adalah lanjutan dari dua tutorial kita sebelumnya yaitu Dasar Pemrograman web GIS dengan Google Map API v3 dan Menambahkan fungsi klik kanan untuk menambahkan marker Pada google map api v3 Jika anda belum membaca saya sarankan untuk menyempatkan membacanya terlebih dahulu.

Baiklah, pada tulisan kali ini programmer goblog bakalan membahas tentang menyimpan dan mengambil data koordinat titik pada database mysql menggunakan PHP sebagai bahasa pemrograman server side nya.

Pada tutorial sebelumnya kita telah membahas tentang apa itu web gis dan juga membahas bagaimana menambahkan titik pada peta. pada tutorial kali ini kita akan belajar bagaimana menyimpan data koordinat titik tersebut beserta keteranganya kedalam database mysql.

Pertama kita akan meyiapkan database nya terlebih dahulu, silahkan sobat buat database dan table nya menggunakan sintak sql berikut.

create database belajargis;
use belajargis;
create table tempat(
    id_tempat int not null auto_increment primary key,
    latlng varchar(100) not null,
    nama_tempat varchar(100) not null,
    keterangan_tempat text
    )

nah kira kira seperti gambar dibawah ini struktur database yang kita buat.

baiklan, selanjutnya kita akan menambahkan form untuk tambah data pada script map.html kita dari tutorial sebelumnya.

tambahkan baris kode berikut di tempat yang bertanda biru seperti gambar dibawah ini.

 var form = '<h4>Tambah Data</h4><form id="formtambahdata" method="post" action="simpan.php"><br><input type="text" id="nama" placeholder="nama tempat" name="nama"><br><textarea id="keterangan" name="keterangan" placeholder="Isi Keterangan tempat"></textarea><br><input type="text" id="latlng" name="latlng" value="'+lat+','+lng+'"><br><input type="submit" value="Simpan"></form>';

Refresh halaman web kita, hasilnya kira-kira seperti gambar dibawah ini.

nah selanjutnya kita akan membuat sebuah file simpan.php untuk menyimpan data dalam form tersebut ke database.

 <?php  
 mysql_connect('localhost','root',''); // membuka koneksi ke database mysql  
 mysql_select_db('belajargis'); //memilih database yang akan digunakan  
 $nama_tempat = $_POST['nama']; // mengambil data dari form  
 $keterangan = $_POST['keterangan'];// mengambil data dari form  
 $latlng = $_POST['latlng'];// mengambil data dari form  
 $query = "insert into tempat (nama_tempat,keterangan_tempat,latlng) values('$nama_tempat','$keterangan','$latlng')";// query untuk insert data ke database  
 if(mysql_query($query)){  
      header('location:map.html'); // mengarahkan ke halaman map.html lagi setelah data berhasil tersimpan  
 }  
 ?>

mari kita coba inputkan data.
caranya pada peta kita klik kanan, klik ok kemudian akan muncul sebuah marker baru. arahkan kursor mouse ke marker yang baru tersebut. dan akan tampil form seperti gambar dibwah ini.
Inputkan data pada kolom nama tempat dan keterangan.

Selanjutnya kita cek di database mysql kita apakah data berhasil tersimpan.

ya, data tersimpan dengan benar.
dengan cara yang sama coba kita tambahkan beberapa data lagi,

kok di peta belum muncul yah data yang kita tambahkan??? muncul pertanyaan seperti ini di benak anda?
Ya, itu karena kita belum menambahkan script untuk mengambil data ini dari database.
Selanjutnya kita akan menampilkan data dari database ke peta.
pertama kita rename dulu file map.html kita agar menjadi map.php

selanjutnya kita akan menyisipkan beberapa baris kode php kedalam file map.php tersebut.
buka file map.php dan cari baris kode yang ditandai dalam kotak putih.

kemudian ganti dengan kode berikut.

  <?php  
           mysql_connect('localhost','root','');  
           mysql_select_db('belajargis');  
           $query="select * from tempat";  
           $datas = mysql_query($query);  
           while ($data=mysql_fetch_array($datas)) {  
             ?>  
             ["<?php echo $data['nama_tempat'];?>", <?php echo $data['latlng']; ?> ,1, "<h4><?php echo $data['nama_tempat'];?></h4><p><?php echo $data['keterangan_tempat'];?></p>"],  
             <?php  
           }  
         ?>

sehingga menjadi seperti gambar berikut ini.

Baiklah jika sudah, mari kita buka file map.php kita tadi dengan menggunakan browser kesayangan sobat masing masing.
kira kira hasilnya seperti gambar dibawah ini.

nah, sekarang data yang tampil sudah sesuai dengan data yang kita tambahkan tadi,,
sebagai catatan, file simpan.php dan map.php harus berada dalam satu folder/directory ya, dan harus didalam web server, dalam kasus penulis kedua file ini berada didalam folder 'belajargis' didalam folder htdocs pada web server xampp..

Tambahan, jangan lupa ganti text header('location:map.html'); di file simpan.php menjadi header('location:map.php');

Baiklah, sampai disini kita sudah bisa menambahkan dan menampilkan data dari database ke peta google map.
Bagi yang membutuhkan file lengkapnya silahkan download disini
Jika sobat programmer merasa tulisan ini bermanfaat, jangan lupa untuk share agar orang lain juga bisa dengan mudah menemukan tulisan ini. terimakasih telah berkunjung dan belajar bersama Programmer GoBlog..

Menambahkan fungsi klik kanan untuk menambahkan marker Pada google map api v3

Abal abal 15.23 GIS, Google Map Tidak ada komentar

Hai sobat programmer. Programmer GoBlog baglik lagi dengan tutorial web gis dengen google map. Sebelumnya di tutorial Dasar Pemrograman web GIS dengan Google Map API v3 Kita telah mengenal GIS dan mencoba membuat web gis sederhana untuk menampilkan titik-titik koordinat tertentu di peta google map. Nah kali ini kita akan melanjutkan web GIS kita dengan menambahkan fungsi tambahan pada web kita agar user dapat menambahkan titik tertentu di peta dengan melakukan klik kanan pada peta tersebut.

Tutorial ini merupakan tutorial lanjutan dari Dasar Pemrograman web GIS dengan Google Map API v3 bagi yang belum mebaca saya sarankan untuk membacanya terlebih dahulu sebelum mengikuti tutorial ini, namun tidak menjadi sebuah keharusan karena anda tetap bisa mengikuti tutorial ini dengan beberapa penyesuaian.

Baiklan, kita buka lagi file tutorial web gis menggunakan google map api v3 kita dari tutorial sebelumnya. Sekarang kita tambahkanbaris berikut dipaling bawah sebelum tutup tag </script>

1:  function setAction(map){  
2:            
3:          google.maps.event.addListener(map, "rightclick", function(event) {  
4:    
5:          if(confirm("Tandai Titik Ini? (klik pada tanda yang muncul untuk melihat pilihan)")){  
6:            var lat = event.latLng.lat();  
7:            var lng = event.latLng.lng();  
8:              
9:            var siteLatLng = new google.maps.LatLng(lat, lng);  
10:            var marker = new google.maps.Marker({  
11:                position: siteLatLng,  
12:                map: map,  
13:                title: "add data",  
14:                zIndex: 100,  
15:                html: "ddd"  
16:    
17:              });  
18:             google.maps.event.addListener(marker, "mouseover", function () {  
19:                  
20:                infowindow.setContent(this.html);  
21:                infowindow.open(map, this);  
22:              });  
23:    
24:          }  
25:            
26:        });  
27:        }

selanjutnya kita perlu memanggil fungsi
setAction(map);
melalui fungsi initialize();
tempatkan baris code

setAction(map);

dibawah baris setMarkers(map,sites);

berukut merupakan keseluruhan kode kita.

1:  <html>  
2:  <head>  
3:   <title></title>  
4:  </head>  
5:  <body>  
6:  <div id="map_canvas" style="width:100%; height:100%;">  
7:    
8:       
9:    </div>  
10:  </body>  
11:  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  
12:  <script type="text/javascript">  
13:  var infowindow = null;  
14:  (function() {  // fungsi untuk dijalankan ketika halaman web dubuka  
15:     
16:      
17:   initialize(); // mengeksekusi fungsi initialize()  
18:     
19:  })();  
20:      
21:    
22:    function initialize() {  
23:        // Baris berikut digunakan untuk mengisi marker atau tanda titik di peta  
24:        var sites = [  
25:    
26:         ['Polinela', -5.358725,105.233413 ,1, '<h4>Politeknik Negeri Lampung</h4><p>Keterangan didalam marker</p>'], // pertama merupakan judul market, kedua adalah titik koordinan latitude, ketiga longitude, dan keempat merupakan z index (titik mana yang ditampilkan lebih dulu) untuk menentukan titik mana diatas titik mana, ketiga merupakan isi keterangan marker nya.  
27:         ['Unila', -5.364505,105.243442 ,2, '<h4>Universitas Lampung</h4><p>Keterangan didalam marker</p>'],  
28:    
29:        ];  
30:        var centerMap = new google.maps.LatLng(-5.387625, 105.249326); // mengatur pusat peta  
31:          
32:        var myOptions = {  
33:          zoom: 13, // level zoom peta  
34:          center: centerMap, // setting pusat peta ke centerMap  
35:          mapTypeId: google.maps.MapTypeId.ROADMAP //menentukan tipe peta  
36:        }  
37:    
38:        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //menempatkan peta pada div dengan ID map_canvas di html  
39:    
40:        setMarkers(map, sites); // memanggil fungsi setMarker untuk menandai titik di peta.  
41:        setAction(map); //tambahan dari tutorial 2 untuk memanggil fungsi setAction(map);  
42:        infowindow = new google.maps.InfoWindow({  
43:            content: "loading..."  
44:          });  
45:    
46:        var bikeLayer = new google.maps.BicyclingLayer();  
47:        bikeLayer.setMap(map); //memnunculkan peta  
48:          
49:      }  
50:    
51:        
52:    
53:    
54:    
55:        function setMarkers(map, markers) {  
56:         //berikut merupakan perulangan untuk membaca masing masing titik yang telah kita definisikan di sites[];  
57:        for (var i = 0; i < markers.length; i++) {  
58:          var sites = markers[i];  
59:          var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);  
60:          var marker = new google.maps.Marker({  
61:            position: siteLatLng,  
62:            map: map,  
63:            title: sites[0],  
64:            zIndex: sites[3],  
65:            html: sites[4]  
66:    
67:          });  
68:    
69:          var contentString = "Some content";  
70:          // berikut merupakan fungsi untuk mengatur agar keterangan marker muncuk ketika mouse diarahkan ke marker (mouse over)  
71:          google.maps.event.addListener(marker, "mouseover", function () {  
72:              
73:            infowindow.setContent(this.html);  
74:            infowindow.open(map, this);  
75:          });  
76:        }  
77:      }  
78:    
79:      //-----------------------------------Tambahan1 dari tutorial 2 -----------------------------------------------  
80:    
81:        function setAction(map){  
82:            
83:          google.maps.event.addListener(map, "rightclick", function(event) {  
84:    
85:          if(confirm("Tandai Titik Ini? (klik pada tanda yang muncul untuk melihat pilihan)")){  
86:            var lat = event.latLng.lat();  
87:            var lng = event.latLng.lng();  
88:              
89:            var siteLatLng = new google.maps.LatLng(lat, lng);  
90:            var marker = new google.maps.Marker({  
91:                position: siteLatLng,  
92:                map: map,  
93:                title: "add data",  
94:                zIndex: 100,  
95:                html: "ddd"  
96:    
97:              });  
98:             google.maps.event.addListener(marker, "mouseover", function () {  
99:                  
100:                infowindow.setContent(this.html);  
101:                infowindow.open(map, this);  
102:              });  
103:    
104:          }  
105:            
106:        });  
107:        }  
108:    
109:      //-----------------------------------akhir tambahan1 dari tutorial 2--------------------------------------------  
110:    
111:    
112:  </script>  
113:  </html>

Baiklah, demikian tutorial kita kali ini tentang bagaimana menambahkan fungsi klik kanan untuk menambahkan marker Pada google map api v3.

Jika ada yang ingin mendownload source code nya silahkan ambil disini
Dan apabila anda merasa tutorial ini bermanfaat anda bisa membantu orang lain menemukan artikel ini dengan meng-klik icon sosial media dibawah untuk membagikannya.

Dasar Pemrograman web GIS dengan Google Map API v3

Abal abal 23.15 GIS, Google Map 5 komentar

Hai sahabat programmer, kali ini programmer goblog bakalan mengulas dan memberikan tutorial tentang web GIS atau SIG memanfaatkan google map sebagai peta.
Apa sih SIG atau GIS?
Sistem Informasi Geografis atau dalam bahasa inggris Geographic Information System merupakan sebuah aplikasi yang mampu mengolah, menyimpan dan menyajikan data yang memiliki informasi spasial atau berbasis keruangan. misal data yang berupa lokasi bangunan, luas lahan, rute, dll.

Lantas apa sih gunanya GIS?

Programmer GoBlog

Cara mudah belajar pemrograman komputer

Rabu, 09 Desember 2015

Menambahkan rute di peta google map api untuk GIS

Selasa, 31 Maret 2015

Cara Kerja GPS dan prinsip matematika yang diterapkan

Selasa, 08 Juli 2014

Menambahkan dan menampilkan data dari database ke peta google map

Senin, 07 Juli 2014

Menambahkan fungsi klik kanan untuk menambahkan marker Pada google map api v3

Minggu, 06 Juli 2014

Dasar Pemrograman web GIS dengan Google Map API v3

Popular Posts

Recent Posts

Categories

Unordered List

Pages

Blog Archive

Kunjungan