Hai teman-teman jago coding. Apa kabar semuanya? Mudah-mudahan baik semuanya. Kali ini masih mau melanjutkan salah satu pengaplikasian Google Maps API pada web, yaitu sekarang mau bahas tentang Geocode.
Geocode adalah salah satu fitur dari Google Maps API yang singkatnya sih adalah mentranslate human readable address menjadi sebuah koordinat peta, latitude dan longitude. Karena google maps ngga ngerti ketika kita ketik Bekasi, maka dari itu perlu dirubah terlebih dahulu ke dalam lat dan lang.
Yuk langsung mulai aja deehh. Seperti biasa untuk persiapan, siapkan text-editor kesayangan kalian. ( Cielah kesayangan ) haha
Pertama mari kita buat file html baru, saya namakan saja geocodedemo.html.
Hal yang pertama kita perlu lakukan adalah, tentu saja kita perlu menginclude javascript Google Maps API
<script src="http://maps.google.com/maps/api/js"></script>
Di demo ini, kita akan membuat dengan konsep, kita masukan alamat kedalam address box lalu maka kita akan mendapatkan posisi di map dan koordinatnya..
HTML Markup
Kita buat tampilan web sederhana sebagai berikut ini:
Sederhana, kita hanya butuh Alamat dimana alamat yang akan di geocode dan dua input lainnya adalah untuk menampilkan posisi koordinat dari alamat tersebut. Dan tentu saja map, untuk menampilkan marker lokasi alamat tersebut.
Kita tidak menggunakan button? ya kali ini kita akan mengeocode dengan onchange function, sehingga ketika input alamat berubah maka map juga akan berubah. Source code awal kita adalah sebagai berikut:
geocodedemo.html
<html>
<head>
<title>Demo Geocode</title>
<script src="http://maps.google.com/maps/api/js"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-6.211544000000000000, 106.845172000000050000);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<center>
<h2>Demo Geocode<span style="font-size: 12px; font-style: italic; opacity: 0.7"> by @hasyemiraws</span></h2>
<label>Alamat: </label><input type="text" onchange="geocodeLokasi()" id="alamat"><br><br>
<label>Lat: </label><input type="text" name="lat"> <label>Long: </label><input type="text" name="lng">
<div id="map-canvas" style="width: 500px; height: 500px; margin-top: 20px">
</div>
</center>
</body>
</html>
JavaScript Markup
Kita tambahkan fungsi untuk mengeocode alamat kita:
function geocodeLokasi() {
var address = document.getElementById('alamat').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var lat = results[0].geometry.location.lat();// mendapatkan latitude
var lng = results[0].geometry.location.lng();// mendapatkan longitude
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
document.getElementById("lat").value = lat;
document.getElementById('lng').value=lng;
});
}
Fungsi geocodeLokasi ini intinya adalah memanggil geocoder dari Google Maps API, dengan menggunakan address dari yang kita input. Lalu di lempar ke server dan mencari results. Selanjutnya seperti biasa dari result tersebut ditampilkan kedalam marker. Results akan ditampilkan jika statusnya adalah OK. ada beberapa jenis status:ZERO_RESULT, OVER_QUERY_LIMIT, REQUEST_DENIED, INVALID_REQUEST.
Jangan lupa pada fungsi initialize kita tambahkan objek baru
geocoder = new google.maps.Geocoder();
dan sebelumnya kita perlu membuat global variabel geocoder dan map, sehingga bisa diakses pada fungsi geocodeLokasi.
FULL SOURCE CODE
geocodedemo.html
<html>
<head>
<title>Demo Geocode</title>
<script src="http://maps.google.com/maps/api/js"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-6.211544000000000000, 106.845172000000050000);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function geocodeLokasi() {
var address = document.getElementById('alamat').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
document.getElementById("lat").value = lat;
document.getElementById('lng').value=lng;
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<center>
<h2>Demo Geocode<span style="font-size: 12px; font-style: italic; opacity: 0.7"> by @hasyemiraws</span></h2>
<label>Alamat: </label><input type="text" onchange="geocodeLokasi()" id="alamat"><br><br>
<label>Lat: </label><input type="text" id="lat"> <label>Long: </label><input type="text" id="lng">
<div id="map-canvas" style="width: 500px; height: 500px; margin-top: 20px">
</div>
</center>
</body>
</html>
Hasil akhirnya adalah:
Yah, cukup simple. Mungkin masih ada beberapa yang perlu diperbaiki dan bisa di kembangkan (improve) dari source code ini. Dalam demo ini ketika kita mencoba geocode alamat baru maka akan marker yang sebelumnya tetap masih ada.
Terima kasih, silahkan komentar jika ada pertanyaan. Semoga bermanfaat teman-teman jago coding :-)
