Blogroll

Kamis, 11 Juni 2015

05.25    No comments

Tutorial Google Maps V3: Mencari Koordinat Lokasi dengan Input Form

Pemrograman Internet
March 21, 2014

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 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!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.

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)