Memasukan alamat baru pada autocomplete pencarian alamat google maps

Memasukan alamat baru pada autocomplete pencarian alamat google maps - fungsi ini digunakan untuk menambahkan atau menyisipkan sebuah alamat baru pada kolom pencarian alamat di google maps, disini saya akan gunakan api place nya google maps dengan menambahkan beberapa baris function agar alamat kita bisa merge dengan alamat google map.

Langsung saja berikut ini caranya .

HTML :

<input id="alamat" />
<ul id="result"></ul>

Script Reference :

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDSbPo0Xbwou2EpteiBxnnK1nMokQLN3J0&amp;libraries=places&amp;callback=initialize"></script>

Javascript :

function initialize() {
$(document).on('keyup',"#alamat",
function(event,e,f){
var inputAlamat = $("#alamat").val()
var data = {
"rows": [{ "Id":0, "name": "Bandung bagian utara"},
{ "Id": 1, "name": "Jakarta bagian selatan" },
{ "Id": 2, "name": "Bogor tenggara " },
{ "Id": 3, "name": "jalan bogor indo"}]
}
var dataCustom= ($.map(data.rows, function (prediction, i) {
return {
label: prediction.name,
value: prediction.name
}
})
);
var autoCompleteService = new google.maps.places.AutocompleteService();
if( inputAlamat != ""){
autoCompleteService.getQueryPredictions({ input: inputAlamat}, function (predictions, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
var result = ($.map(predictions, function (prediction, i) {
return {
label: prediction.description,
value: prediction.description
}
})
);
var resultSementara = dataCustom.concat(result)
$("#result").empty();
resultSementara.sort(function(item,item2){
if (item.label > item2.label) return 1
return 0
}
)
var resultAkhir = resultSementara.slice(0,5)
resultAkhir .forEach(function(prediction) {
var li = document.createElement('li');
li.appendChild(document.createTextNode(prediction.label));
document.getElementById('result').appendChild(li);

});
});
}
});
}

Penjelasan :

var data = {} ->  Ini fungsi untuk menambahkan alamat , bisa juga kita get alamat dari database dengan menggunakan ajax .
var dataCustom ={} -> Ini fungsi untuk maping hasil result data dengan result google place.
var autoCompleteService ={} -> Ini fungsi api nya google maps.
var result  ={} -> Ini fungsi untuk maping result google place api.
var resultSementara = {} -> Ini fungsi untuk menggabungkan data alamat yang kita buat dengan alamat google place.
var resultAkhir ={} -> Ini fungsi untuk mengambil data hanya 5 teratas saja setelah sebelumnya di sort.

Untuk contoh nya bisa di coba disini,  ketik bandung, maka akan muncul Bandung bagian utara pada bagian hasil pencarian.

Artikel Terkait

Memasukan alamat baru pada autocomplete pencarian alamat google maps

4/ 5

Oleh share.materi

share.materi 20.36 Komentar