Kreu Aŭtomate Kompletigu adresan serĉilon per Google Maps Geocoder

Saluton al ĉiuj, ĝis revido kun Portgastea, la originala bela sundana hehe, En ĉi tiu lernilo, mi volas krei aŭtokompletan adresan serĉformularon per la geokodilo de Google Maps, eble iuj miaj amikoj jam scias kaj estas iuj, kiuj komprenas pli bone ol mi. Aŭtomate kompletigi ĉi tie signifas, kiam ni aŭtomate elprenas la adresajn nomojn kaj prenas datumojn de Google Maps per la geokodilo.

Bone, mi tuj kreos novan dosieron nomatan index.html aŭ ĝi dependas de vi kaj enmetos la skripton sube :

<!DOCTYPE html>
<html>
  <kapo>
    <titolo>Kreu Aŭtomate kompletigi adresan serĉformularon, uzante Geokodilon</titolo>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <stilo>
      html, korpo, #mapo-tolo {
        alteco: 100%;
        rando: 0px;
        remburaĵo: 0px
      }
    </stilo>
	<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"></skripto>
    <skripto>
 
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', funkcio() {
    fillInAddress();
  });
}
 
 
function fillInAddress() {
 
  var place = autocomplete.getPlace();
 
  por (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }
 
 
  por (var i = 0; mi < place.address_components.length; i++) {
    var addressType = place.address_components[mi].types[0];
    se (componentForm[addressType]) {
      var val = place.address_components[mi][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
 
function geolocate() {
  se (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(funkcio(position) {
      var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
      var circle = new google.maps.Circle({
        centro: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}
 
 
    </skripto>
  </kapo>
 
  <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"></interspaco>
            <span class="icon-bar"></interspaco>
            <span class="icon-bar"></interspaco>
          </butono>
          <a class="brand" href="http://andeznet.com">AndezNet</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="index.php">Hejmo</a></ĉe la>
            </la>
          </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>
    </tablo>
	</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 eoo date("Y");?></p>
				</div><!--/span-->
			  </div><!--/row-->
			</div><!--/span-->
	</div><!--/row-->	
  </korpo>
</html>

Untuk lebih menarik saya menambahkan boostrap di head seperti dibawah ini

Fontkodo   
<ligilo href="assets/css/bootstrap.css" rel="stylesheet" amaskomunikiloj="screen">
    <ligilo href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" amaskomunikiloj="screen">
	<ligilo href="assets/css/bootstrap.min.css" rel="stylesheet" amaskomunikiloj="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

Kreu Aŭtomate kompletigi adresan serĉformularon, uzante Geokodilon

Link DOWNLOAD

Ok sekian Tutorial kali ini , sampai ketemu lagi bye

Happy Coding & Programado

You may also like...

10 Responses

  1. Aryan says:

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

  2. ibnu says:

    Artikel nya bermanfaat mas 🙂

  3. Saiful_c172 says:

    PakKenapa Kotanya tidak terisi,,.

  4. Yefta Sangka says:

    makasih bro..

Lasu Respondon

Via retpoŝta adreso ne estos publikigita. Bezonataj kampoj estas markitaj *