Cara Membuat Geocoding Map Dengan API Google Maps - Sebelumnya kita sudah membuat static map, kali ini kita akan membuat Map dengan Geocoding Service menggunakan API Google Maps. Geocoding adalah salah satu fitur api google maps yang mengubah suatu alamat lokasi menjadi kordinat latitude dan longitude serta sebaliknya, jika sebelumnya kita sudah menentukan sendiri latitude dan longitudenya kali ini kita dapat melakukan pencarian lokasi dengan memasukan nama alamatnya. Untuk lebih jelansya langsung saja ke prakteknya.
Baca juga : Cara Membuat Static Map dengan API Google Maps
Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.
HTML
Jika anda belum membuat folder Google_maps buatlah sebuah folder dengan nama Google_maps kemudian buat sebuah file HTML dengan nama geocoding.html kemudian masukan script :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Geocoding service</title>
<style>
html { height: 100% }
#panel{padding:5px;}
#address {
height: 25px;
padding: 2px;
width: 400px;
}
#btn{
height: 31px;
background: #267BA8;
border: none;
padding: 5px;
color: #fff;
}
#map-canvas { height: 400px; width:100%; }
*{
margin: 0;
padding: 0;
}
body {
text-align:center;
background-color:#61b3de;
font-family:Arial, Helvetica, sans-serif;
font-size:80%;
color:#666;
}
.wrap {
background: #f3f8fb;
width:730px;
margin:30px auto;
border: 4px dashed #61b3de;
border-radius:4px;
padding: 20px 5px;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
color:#645348;
font-style:italic;
text-decoration:none;
font-weight:100;
padding: 10px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-6.187931, 107.031279);
var mapOptions = {
zoom: 12,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = document.getElementById('address').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
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class="wrap">
<h1>Jin Toples Programming</h1>
<h1>Membuat Geocoding dengan API Google Maps</h1>
<div id="panel">
<input id="address" type="textbox" value="Kebalen, bekasi">
<input id="btn" type="button" value="Search" onclick="codeAddress()">
</div>
<div id="map-canvas"></div>
</div>
</body>
</html>
Perhatikan baris kode di atas :
function codeAddress() {
var address = document.getElementById('address').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
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}Ini adalah fungsi yang berjalan ketika anda menekan tombol search, fungsi ini adalah geocoding anda yang bertugas mengkonversi alamat menjadi kordinat. kemudian marker memberikan tanda pada kordiat yang dituju.
Anda dapat mencobanya sekarang dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.
Apabila masih ada yang binggung anda juga dapat membacanya dari refrensi langsung di dokumentasi Geocoding Services API Google Maps di sini : CEK TKP
Selanjutnya kita bertemu lagi membahas Maps dengan direction atau petunjuk arah dari suatu lokasi ke lokasi lain.
Baca disini : Cara Membuat Direction Map Dengan API Google Maps
Baca disini : Cara Membuat Direction Map Dengan API Google Maps
Static Map dengan API Google Maps anda sekarang sudah selesai, baca juga tutorial program HTML dan Javascript lainnya.
Tidak ada komentar:
Posting Komentar