住所を入力し、Geocompleteを使用して\ユーザーに可能な住所のリストを表示しています。ユーザーが住所の入力を終了したら、入力された住所の経度と緯度の座標を取得したいと考えています。リストから選択した住所の座標を取得する際に問題が発生しています。
jquery を試しblur
ましたが、リストがポップアップするとすぐに起動しますafter
。change
のリストから選択した住所を設定する方法を探していloopUpAdd
ます。住所が選択されるかオートコンプリートが完了したら、住所の経度と緯度の座標を取得できるようにしたいと考えています。のアラートは、$('#loopUpAdd').blur(function(evt){....
選択されたものではなく、ユーザーがこれまでに入力した値を示しています。ここに私のフィドルGeoCodeがあります
HTML
<label>Address</label>
<input type="text" id="loopUpAdd" />
<label>Long</label>
<input type="text" id="long" />
<label>Lat</label>
<input type="text" id="lat" />
JQuery
function getLocation() {
var input = document.getElementById('loopUpAdd');
var options = {
types: ['(cities)'],
componentRestrictions: {country: 'tt'}
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
$('#lat').val(0);
$('#long').val(0);
}
function codeAddress(address) {
//var address = document.getElementById("loopUpAdd").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var lng = results[0].geometry.location.lng();
var lat = results[0].geometry.location.lat();
$('#lat').val(lat);
$('#long').val(lng);
alert(lng +'-'+lat);
} else {
$('#lat').val(0);
$('#long').val(0);
}
});
}
$(document).ready(function () {
$('#loopUpAdd').blur(function(evt){
alert($(this).val());
codeAddress($(this).val());
});
$('#loopUpAdd').mouseenter(function(evt){
$('#lat').val(0);
$('#long').val(0);
});
google.maps.event.addDomListener(window, 'load', getLocation);
});