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, aŭtomata kompletigo;
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(aŭtomata kompletigo, '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(pozicio) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var circle = new google.maps.Circle({
centro: geolocation,
radiuso: 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-kolapso ->
</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</la procezo de forigo de biodatenoj bazitaj sur ID per metodo>
<td class="slimField"><input class="field" id="street_number"
disabled="true"></input></la procezo de forigo de biodatenoj bazitaj sur ID per metodo>
<td class="wideField" colspan="2"><input class="field" id="route"
disabled="true"></input></la procezo de forigo de biodatenoj bazitaj sur ID per metodo>
</tr>
<tr>
<td class="label">Kota</la procezo de forigo de biodatenoj bazitaj sur ID per metodo>
<td class="wideField" colspan="3"><input class="field" id="locality"
disabled="true"></input></la procezo de forigo de biodatenoj bazitaj sur ID per metodo>
</tr>
<tr>
<td class="label">Provinsi</la procezo de forigo de biodatenoj bazitaj sur ID per metodo>
<td class="slimField"><input class="field"
id="administrative_area_level_1" disabled="true"></input></la procezo de forigo de biodatenoj bazitaj sur ID per metodo>
<td class="label">Kode Pos</la procezo de forigo de biodatenoj bazitaj sur ID per metodo>
<td class="wideField"><input class="field" id="postal_code"
disabled="true"></input></la procezo de forigo de biodatenoj bazitaj sur ID per metodo>
</tr>
<tr>
<td class="label">Negara</la procezo de forigo de biodatenoj bazitaj sur ID per metodo>
<td class="wideField" colspan="3"><input class="field"
id="country" disabled="true"></input></la procezo de forigo de biodatenoj bazitaj sur ID per metodo>
</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">Teknologia Stokejo & Informoj</p>
<p>&kopii; <a href="http://andeznet.com">www.andeznet.com</a> <?php eoo dato("Y");?></p>
</div><!--/interspaco-->
</div><!--/vico-->
</div><!--/interspaco-->
</div><!--/vico-->
</korpo>
</html>Untuk lebih menarik saya menambahkan boostrap di head seperti dibawah ini
<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
Bone, 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 Elŝuti
Ok sekian Tutorial kali ini , sampai ketemu lagi bye
Feliĉa Kodigo & Programado
Aryan
Thanks pak, bookmark dulu kali aja nanti butuh… dulu kayake pernah butuh ginian tapi lupa