Menampilkan Koordinat Google Maps Dengan Combobox

Dipublikasikan oleh El Cicko pada

cropped blake connally IKUYGCFmfw4 unsplash

Google-Maps

Hoaaam…seneng rasanya bisa balik lagi ke kampung tercinta dan berakhir pekan disini walaupun akhirnya kudu nenteng-nenteng kerjaan dari kantor, sebenernya pengen banget main ke ciater sama salah satu temen lama karna udah lama banget ga berendem disana cuman sayangnya temenku ini harus tetep stay di Jakarta karena rumah tantenya tempat dia tinggal mau digusur..jadinya ya dia mau ga mau harus ikut demo rakyat sama orang sekelurahan…lol 😀

Ok, cukup ah curhatnya…kali ini saya mau share script untuk bisa menampilkan data koordinat di Google Maps dengan combobox, teknik ini dipake pada suatu kasus dimana kita harus input data koordinat pada suatu kota ke kota yang lain, khan repot juga kalo kita harus geser-geser markernya kesana kemari. Jadi dengan combobox ini, ketika kita memilih suatu kota pada combobox, maka peta akan menampilkan daerah koordinat pada kota tersebut, abis itu kita tinggal geser aja markernya ke lokasi yang kita mau. 😀

Untuk scriptnya sebagai berikut :

<html>
<head>
<title>Warteg</title>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<style>
  body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
  }
  #map_canvas img {
    max-width: none;
    }

   #map_canvas label {
    width: auto; display:inline;
  }
</style>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>

<!-- load googlemaps api dulu -->
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    var peta;
    var gambar_tanda;
    gambar_tanda = 'assets/img/marker.png';

    function peta_awal(){
        // posisi default peta saat diload
        var lokasibaru = new google.maps.LatLng(-7.090911,107.668887);
        var petaoption = {
            zoom: 8,
            center: lokasibaru,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        peta = new google.maps.Map(document.getElementById("map_canvas"),petaoption);

        // ngasih fungsi marker buat generate koordinat latitude & longitude
        tanda = new google.maps.Marker({
            position: lokasibaru,
            map: peta, 
            icon: gambar_tanda,
            draggable : true
        });

        // ketika markernya didrag, koordinatnya langsung di selipin di textfield
        google.maps.event.addListener(tanda, 'dragend', function(event){
                document.getElementById('latitude').value = this.getPosition().lat();
                document.getElementById('longitude').value = this.getPosition().lng();
        });
    }

    function setKabKota(lokasi){
        // mengambil koordinat dari database
        var koordinat = lokasi.split('|');
        var x = koordinat[0];
        var y = koordinat[1];
        var id = koordinat[2];

        var lokasibaru = new google.maps.LatLng(x, y);
        var petaoption = {
            zoom: 13,
            center: lokasibaru,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        peta = new google.maps.Map(document.getElementById("map_canvas"),petaoption);

         // ngasih fungsi marker buat generate koordinat latitude & longitude
        tanda = new google.maps.Marker({
            position: lokasibaru,
            icon: gambar_tanda,
            map: peta, draggable : true
        });

        google.maps.event.addListener(tanda, 'dragend', function(event){
                document.getElementById('latitude').value = this.getPosition().lat();
                document.getElementById('longitude').value = this.getPosition().lng();
        });
    }

    function setCabang(x,y,id){
        // mengambil koordinat dari database
        var lokasibaru = new google.maps.LatLng(x, y);
        var petaoption = {
            zoom: 14,
            center: lokasibaru,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        peta = new google.maps.Map(document.getElementById("map_canvas"),petaoption);

         // ngasih fungsi marker buat generate koordinat latitude & longitude
        tanda = new google.maps.Marker({
            position: lokasibaru,
            icon: gambar_tanda,
            draggable : true,
            map: peta
        });

        // ketika markernya didrag, koordinatnya langsung di selipin di textfield
        google.maps.event.addListener(tanda, 'dragend', function(event){
                document.getElementById('latitude').value = this.getPosition().lat();
                document.getElementById('longitude').value = this.getPosition().lng();
        });
    }
</script> 
</head>
<body onload="peta_awal()">
<div class="container">
<div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">WARTEG CICKO</a>
          <div class="btn-group pull-right">

          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
<?php

$o = "";

if (isset($_GET['success']) && ($_GET['success'] == "1")) {

    $o .= '<div class="alert alert-success">
            <a class="close" data-dismiss="alert" href="#">x</a>
            Proses tambah cabang berhasil
            </div>';

} elseif (isset($_GET['success']) && ($_GET['success'] == "0")) {

    $o .= '<div class="alert alert-error">
            <a class="close" data-dismiss="alert" href="#">x</a>
            Proses tambah cabang gagal
           </div>';
} elseif (isset($_GET['remove']) && ($_GET['remove'] == "1")) {

    $o .= '<div class="alert alert-success">
            <a class="close" data-dismiss="alert" href="#">x</a>
            Proses hapus cabang berhasil
            </div>';

} elseif (isset($_GET['remove']) && ($_GET['remove'] == "0")) {

    $o .= '<div class="alert alert-error">
            <a class="close" data-dismiss="alert" href="#">x</a>
            Proses hapus cabang gagal
           </div>';
}

echo $o;

?>
<div class="row">
<div class="span8">
    <div class="control-group">
     <div id="map_canvas" style="width:100%; height:500px"></div>
    </div>
</div>

    <form action="?action=add" method="POST"> 
    <div class="span4">
    <div class="control-group">
      <label class="control-label" for="input01">Nama Cabang</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="nama_cabang" name="nama_cabang" rel="popover" data-content="Masukkan nama cabang." data-original-title="Cabang">
      </div>
    </div>

    <div class="control-group">
      <label class="control-label" for="input01">Kabupaten</label>
      <div class="controls">
        <select name="kabupaten" id="kabupaten" onchange="setKabKota(this.options[this.selectedIndex].value)" style="width:280px;" tabindex="2">
        <?php

        /* menampilkan data kabupaten */
        $kabupaten = mysql_query("SELECT * FROM `kabkota`");
        if (mysql_num_rows($kabupaten) > 0)  {
            echo '<option value="">Pilih kabupaten...</option>';
            while($l = mysql_fetch_array($kabupaten)) {
                echo '<option value="'.$l['lat']."|".$l['long']."|".$l['idkabkota'].'">'.$l['nama_kabkota'].'</option>';
            }
        } else {
            echo '<option value="">tidak ada data kabupaten</option>';
        }

        echo $o;

        ?>
        </select>
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="input01">Longitude</label>
          <div class="controls">
            <input type="text" class="input-xlarge" id="longitude" name="longitude" >
          </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="input01">Latitude</label>
          <div class="controls">
            <input type="text" class="input-xlarge" id="latitude" name="latitude">
          </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="input01"></label>
          <div class="controls">
           <button type="submit" class="btn btn-success">Tambah Cabang</button>

          </div>
    </div>
    </form>
    <div class="control-group">
        <label class="control-label" for="input01">Daftar Cabang</label>
          <div class="controls">
          <div id="daftar">
          <ul>
          <?php
          // mengambil data dari database
          $lokasi = mysql_query("select * from `cabang`");

            while($l=mysql_fetch_array($lokasi)){
                // membuat fungsi javascript untuk nantinya diolah dan ditampilkan dalam peta

                echo "<li><a href="javascript:setCabang(".$l['lat'].",".$l['long'].",".$l['id'].")">".$l['nama_cabang']."</a> | <a href='?action=remove&id=".$l['id']."'>Hapus</a></li>";
            }
          ?>
          </ul>
          </div>

          </div>
    </div>

</div>
</div>
<hr>
      <footer>
        <p>&copy; Warteg Cicko 2013</p>
      </footer>
</div>
</body>
</html>

<?php

if ($_GET['action'] == "add") {

    // kita slice dulu arraynya untuk mengambil id dari kabupaten tersebut
    $array      = array();
    $kabupaten  = $_POST['kabupaten'];
    $array      = $kabupaten;
    $newarray   = explode("|", $array);

    $kabkota        = htmlentities(mysql_real_escape_string($newarray[2]));
    $nama_cabang    = htmlentities(mysql_real_escape_string($_POST['nama_cabang']));
    $longitude      = htmlentities(mysql_real_escape_string($_POST['longitude']));
    $latitude       = htmlentities(mysql_real_escape_string($_POST['latitude']));

    // input data ke database
    $input_cabang = mysql_query("insert into `cabang` (`nama_cabang`,`kabkota`,`lat`,`long`) values ('$nama_cabang','$kabkota','$latitude','$longitude')");

    if ($input_cabang) {
        ?>
        <script language="javascript">
        document.location="?success=1";
        </script>
        <?php
    } else {
        ?>
            <script language="javascript">
            document.location="?success=0";
            </script>
        <?php
    }

} elseif ($_GET['action'] == "remove") {
    $id = htmlentities(mysql_real_escape_string($_GET['id']));
    // hapus data dari database
    $hapus_cabang = mysql_query("DELETE FROM `cabang` WHERE `id` = '".$id."'");

    if ($hapus_cabang) {
        ?>
        <script language="javascript">
        document.location="?remove=1";
        </script>
        <?php
    } else {
        ?>
            <script language="javascript">
            document.location="?remove=0";
            </script>
        <?php
    }
}

Nah untuk screenshot hasilnya seperti ini :

 

googlemaps-combobox

 

Untuk full sourcecodenya bisa didownload disini :

download button

 

 

 

Selamat mencoba dan Semoga bermanfaat 😀

 

 


El Cicko

Nama saya Riky Fahri Hasibuan, Saya yang biasa nulis di blog ini. Blog ini adalah sarana dokumentasi dari apa yang saya kerjakan dan tidak ada salahnya juga saya sebarkan. Jika artikel di blog bermanfaat, kamu bisa memberikan apresiasi pada blog ini dengan memberikan donasi pada blog ini.

6 Komentar

rangga · Oktober 2, 2015 pada 9:18 am

tanks gan, tutornya

abang · Maret 30, 2016 pada 10:41 am

terima kasih source-nya

Broden · Juli 27, 2016 pada 9:25 pm

Makasih bgt gan tutorialnya… .

Sangat membantu bgt.

azzam · Juli 30, 2016 pada 2:10 am

Kok gak bisa di download ya gan source codenya. tolong dikirim ke email aku dong gan, buat skripsi ini. Mksh sblmnya ya gan.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *