Tutorial Google Maps V3: Mencari Koordinat Lokasi dengan Input Form

Tutorial Google Maps V3: Mencari Koordinat Lokasi dengan Input Form

Tutorial Information

ProgramGoogle Maps
Versionv3
DifficultyStandar
Estimated Time30 menit

Salah satu fitur unggulan Google Maps yaitu dapat menentukan secara tepat titik koordinat sebuah lokasi. Sayangnya ketika menggunakan Google Maps, pengguna harus melakukan klik…

Salah satu fitur unggulan Google Maps yaitu dapat menentukan secara tepat titik koordinat sebuah lokasi. Sayangnya ketika menggunakan Google Maps, pengguna harus melakukan klik kanan terlebih dahulu untuk melihat titik koordinat sebuah lokasi. Titik koordinat yang dimaksud adalah koordinat lokasi berupa latitude dan longitude.

map1

API Google Maps memungkinkan developer untuk mengkustomisasi tampilan Google Maps sedemikian rupa agar lebih bermakna untuk tujuan tertentu. Dalam hal ini yaitu menampilkan titik koordinat sebuah lokasi yang diinginkan oleh pengguna. Kode program berikut akan menghasilkan sebuah antarmuka pencarian titik koordinat melalui sebuah form input lokasi. Kode berikut ditulis dengan menggunakan bahasa HTML5, CSS, dan Javascript dengan nama file index.html.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Mencari Koordinat Lokasi dengan Input Form</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <style>
      html, body {
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: small;
      }

      form {
        margin-bottom: 10px;
      }
      .form
      {
        text-align: center;
        margin-left:25%;
        margin-right:25%;
      }
      #map {
        width: 100%;
        height: 450px;
        border: 1px solid black;
      }
    </style>

    <script type="text/javascript" >

    (function() {

    // Mendefinisikan variabel global
    var map, geocoder, marker, infowindow;

    window.onload = function() {

      // Membuat map baru
      var options = {  
        zoom: 5,  
        center: new google.maps.LatLng(-6.20810, 106.84571),  
        mapTypeId: google.maps.MapTypeId.ROADMAP  
      };  

      map = new google.maps.Map(document.getElementById('map'), options);

      // Mengambil referensi ke form HTML
      var form = document.getElementById('addressForm');

      // Menangkap event submit form
      form.onsubmit = function() {
        // Mendapatkan alamat dari input teks
        var address = document.getElementById('address').value;

        // Membuat panggilan Geocoder 
        getCoordinates(address);

        // Menghindari form dari page submit
        return false;

      }

    }

    // Membuat sebuah fungsi yang mengembalikan koordinat alamat
    function getCoordinates(address) {
      // Mengecek apakah terdapat 'geocoded object'. Jika tidak maka buat satu.
      if(!geocoder) {
        geocoder = new google.maps.Geocoder();  
      }

      // Membuat objek GeocoderRequest
      var geocoderRequest = {
        address: address
      }

      // Membuat rekues Geocode 
      geocoder.geocode(geocoderRequest, function(results, status) {

        // Mengecek apakah ststus OK sebelum proses
        if (status == google.maps.GeocoderStatus.OK) {

          // Menengahkan peta pada lokasi 
          map.setCenter(results[0].geometry.location);

          // Mengecek apakah terdapat objek marker
          if (!marker) {
            // Membuat objek marker dan menambahkan ke peta
            marker = new google.maps.Marker({
              map: map
            });
          }

          // Menentukan posisi marker ke lokasi returned location
          marker.setPosition(results[0].geometry.location);

          // Mengecek apakah terdapat InfoWindow object
          if (!infowindow) {
            // Membuat InfoWindow baru
            infowindow = new google.maps.InfoWindow();
          }

          // membuat konten InfoWindow ke alamat
          // dan posisi yang ditemukan
          var content = '<strong>' + results[0].formatted_address + '</strong><br />';
          content += 'Lat: ' + results[0].geometry.location.lat() + '<br />';
          content += 'Lng: ' + results[0].geometry.location.lng();

          // Menambahkan konten ke InfoWindow
          infowindow.setContent(content);

          // Membuka InfoWindow
          infowindow.open(map, marker);

        } 

      });

    }

  })();

  </script>

</head>
<body>

  <div class="form">
  <h2>Mencari Titik Koordinat Lokasi dengan Input Form</h2>
  <form id="addressForm" action="/">
    <div>
      <label for="address">Lokasi:</label>
      <input type="text" name="address" id="address" />
      <input type="submit" id="addressButton" value="Cari Koordinat" />          
    </div>
  </form>

  <div id="map"></div>

</body>
</html>

 

Hasil tampilan pada browser:

map2

Sebagai contoh, ketika pengguna memasukkan nama lokasi “Bandung”, maka Google Maps akan menampilkan penanda (marker) lokasi yang ditemukan bersamaan dengan munculnya InfoWindow yang berisi nama lokasi dan titik koordinat kota “Bandung”.

map3

Penutup

Anda dapat memodifikasi kode program di atas untuk tujuan-tujuan yang lain. Misalnya untuk mencari dan menampilkan lokasi wisata, rumah sakit, pasar, sekolah, dan lain-lain yang terdaftar dalam sebuah database. Selain itu, Anda juga dapat menggabungkan kode program di atas dengan fungsi atau pustaka (library) yang disediakan oleh Google Maps API, seperti fungsi untuk mencari titik-titik lokasi yang berdekatan. Selamat mencoba dan tetap berbagi.

Tag: , ,

4 Comments

Leave Comment
  1. YobertParai says:

    Kodenya bisa dipasang di blogspot gk sob…????

  2. Edwiin says:

    Sangat bermanfaat sekali gan tutorialnya…. thanks gan…

Write Comment

Your email will not be published. The marked label is required.