現在、オブジェクトの住所を使用して、マップ上に複数のポイントをプロットしています。プログラムはオブジェクト、住所をループし、geocodes
各位置のマーカーをプロットします。
私が抱えている問題は、ユーザーがリスト内の場所をクリックすると、マップがその場所にパンすることです。API には値panTo()
を受け入れる関数がありますが、ジオコード関数からlat, lng
の結果はresults[0].geometry.location
外部では利用できません。
質問
結果から何らかの方法で取得lat, lng
し、既存のデータ オブジェクトに追加して、関数の外部で使用することで、関数で使用できるようにするにはどうすればよいpanTo()
ですか?
【緯度・経度はhtmldata
属性で出力】
クリックハンドラ
$('.place').on('click', function() {
$this = $(this);
lat = $this.data('lat');
lng = $this.data('lng');
map.panTo(new google.maps.LatLng(lat, lng));
});
データ
var locations = [
{
id: 'place1',
postcode: 'B1 1AA'
},
{
id: 'place2',
postcode: 'CB9 8PU'
}
];
コード
for (i = 0; i < locations.length; i++) {
geocoder.geocode({'address': locations[i].postcode}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
} else {
console.log('Geocode was not successful ' + status);
}
}); // end geocode
$(places).append(
'<li class="place" data-id="'+locations[i].id+'" data-lat="<!--lat to go here-->" data-lng="<!--lng to go here-->">'+
'<div class="place-wrap">'+
'<h2>'+locations[i].name+'</h2>'+
'<p class="territory">'+locations[i].territory+'<p>'+
'</div>'+
'</li>'
);
} // end for