Menampilkan Koordinat Google Maps Dengan Combobox

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 😀

 

 

6 pemikiran pada “Menampilkan Koordinat Google Maps Dengan Combobox”

Tinggalkan komentar