Saturday, August 19, 2017

Membuat Input Autocomplete Google Maps

Sudah banyak tutorial malasah form inputan berbagai model, saat ini saya ingin membagikan script membuat inputan form alamat autocomplete goole maps, jadi jika kita input suatu alamat maka sugesti alamat yang mendekati inputan yang di ketik akan muncul, di samping itu form inputan lain seperti nama kota, kodepos akan terisi otomatis .lihat gambar dibawah ini,

Membuat Input Autocomplete Google Maps

1. Include jQuery dan goole maps javascript library
<script src="//<a href="http://www.jqueryscript.net/tags.php?/map/">map</a>s.googleapis.com/maps/api/js?libraries=places&key=API HERE"></script>
<script src="//code.jquery.com/jquery.min.js"></script>

2. Include jQuery Geocomplete plugin JS dan CSS
<link href="dist/jquery.geocomplete.css" rel="stylesheet">
<script src="dist/jquery.geocomplete.js"></script>

3. Buat form inputan.
<input id="txtAddress" type="text" placeholder="Start typing an address">
<label>Country:</label>
<select id="ddlCountry1" class="ui dropdown">
  <option value="">Select Country</option>
  <option value="1">United States</option>
  <option value="2">Mexico</option>
  <option value="3">Canada</option>
  <option value="4">Chile</option>
</select>
<label>State:</label>
<div class="ui input">
  <input id="txtState1" type="text">
</div>

<label>County:</label>
<div class="ui input">
  <input id="txtCounty1" type="text">
</div>

<label>City:</label>
<div class="ui input">
  <input id="txtCity1" type="text">
</div>

<label>Zip Code:</label>
<div class="ui input">
  <input id="txtZipCode1" type="text">
</div>

4. Panggil script fungsi alamat
$("#txtAddress").geocomplete({
  fields: {
    txtAddress1 : "street address",
    txtCity1    : "city",
    txtCounty1  : "county",
    txtState1   : "state",
    ddlCountry1 : "country",
    txtZipCode1 : "zipcode"
  }
});

5. Script configurasi
$("#txtAddress").geocomplete({
  appendToParent: true,
  geolocate: false, // Sets the bounds based on the browser's location
  types: ["geocode"],
  map: null // the google map you would like to center based upon the selected location.
});

Selesai tinggal running dan di kombinasikan dengan website teman-teman.
File ini bisa di dapatkan secara gratis hanya minta bantuanya untuk like fans page kami. terimakasih

Link Download

Server 1 http://clkmein.com/q2GVnp

Server2  http://coginator.com/jAm

By di