Membuat form pencarian alamat Autocomplete mengunakan Geocoder Google Maps
Hai All ketemu lagi sama saya portgastea, si ganteng asli sunda hehe, tutorial kali ini saya mau membuat form pencarian alamat autocomplete mengunakan geocoder google maps, mungkin di antara temen-temen ada yang sudah tau dan dan ada yang lebih mengerti dari saya. Autocomplete disini maksudnya ketika kita ketika alamat langsung otomastis keluar nama-nama alamat mengambil data dari google maps mengunakan geocoder.
Ok langsung saya kita buat file baru dengan nama index.html atau terserah anda dan masukan script dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Membuat form pencarian alamat Autocomplete, mengunakan Geocoder</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script>
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initialize() {
autocomplete = new google.maps.places.Autocomplete(
/** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
{ types: ['geocode'] });
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}
function fillInAddress() {
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
</script>
</head>
<body onload="initialize()">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://andeznet.com">AndezNet</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="index.php">Home</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div class="hero-unit">
<div id="locationField">
<input id="autocomplete" class="span6" placeholder="Ketik Alamat yang anda cari"
onFocus="geolocate()" type="text"></input>
</div>
<table id="address">
<tr>
<td class="label">Nama Jalan</td>
<td class="slimField"><input class="field" id="street_number"
disabled="true"></input></td>
<td class="wideField" colspan="2"><input class="field" id="route"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">Kota</td>
<td class="wideField" colspan="3"><input class="field" id="locality"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">Provinsi</td>
<td class="slimField"><input class="field"
id="administrative_area_level_1" disabled="true"></input></td>
<td class="label">Kode Pos</td>
<td class="wideField"><input class="field" id="postal_code"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">Negara</td>
<td class="wideField" colspan="3"><input class="field"
id="country" disabled="true"></input></td>
</tr>
</table>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="alert alert-info">
<a name="contact"></a>
<h2>www.andeznet.com</h2>
<p class="text-info">Gudang Teknologi & Informasi</p>
<p>© <a href="http://andeznet.com">www.andeznet.com</a> <?php echo date("Y");?></p>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
</div><!--/row-->
</body>
</html>Untuk lebih menarik saya menambahkan boostrap di head seperti dibawah ini
<link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" media="screen
Ok, Mudah kan??? untuk menjalan ini harus mengunakan internet karena langsung terhubung ke google maps, jika sudah selesai maka kita jalankan index.html di localhost, apabila sudah benar maka akan tampil seperti dibawah ini
Link DOWNLOAD
Ok sekian Tutorial kali ini , sampai ketemu lagi bye
Happy Coding & Programing
Thanks pak, bookmark dulu kali aja nanti butuh… dulu kayake pernah butuh ginian tapi lupa
Ok gan
Artikel nya bermanfaat mas 🙂
Ok Terima kasih
Pak…Kenapa Kotanya tidak terisi,,.
Coba liat script city nya
makasih bro..
sama2
makasih gan
iya sama2 gan