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>&copy; <a href="http://andeznet.com">www.andeznet.com</a>&nbsp<?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

Membuat form pencarian alamat Autocomplete, mengunakan Geocoder

Link DOWNLOAD

Ok sekian Tutorial kali ini , sampai ketemu lagi bye

Happy Coding & Programing

You may also like...

10 Responses

  1. Aryan says:

    Thanks pak, bookmark dulu kali aja nanti butuh… dulu kayake pernah butuh ginian tapi lupa :mrgreen:

  2. ibnu says:

    Artikel nya bermanfaat mas 🙂

  3. Saiful_c172 says:

    Pak…Kenapa Kotanya tidak terisi,,.

  4. Yefta Sangka says:

    makasih bro..

Leave a Reply

Your email address will not be published.