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.
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" /> <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:
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”.
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.
http://bisakomputer.com/
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
