久しぶりにGoogle API触った。
アレコレ組み合わせてコンテンツ作ろうかと思ったけども分解しておかないと、あとで見返して困りそうと思ったのでとりあえず、Geocoding APIの部分だけ使い方を整理する。
GCPからGeocoding APIを有効化する。
Maps Javascript API使った時のGCP画面から追加でAPIを有効化する。
認証情報のところからAPIキーと紐づけを行えばすぐに使い始めれます。
コールバック関数で値が取れるからthisでちょっと迷子になった。
今回、Vue.jsにGeocoding埋め込もうとしたんだけどcallback functionの中でthisしたらVue dataのアイテムじゃなくなってて取得した結果をVueのリストに反映できないのに気付かずちょっぴり悶々した。
ソース汚いけど・・・、とりあえず目をつぶる?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
var app = new Vue({ el: "#input-form", data: { label_name:"", address_search: "", adrs_list: [] }, created: function (){ }, methods:{ getlatlng(){ let adrs = this.address_search; if (adrs.length) { var rslts = this.adrs_list; var geocoder = new google.maps.Geocoder(); // 第１引数はGeocoderRequest。住所⇒緯度経度座標の変換時はaddressプロパティを入れればOK。 // 第２引数はコールバック関数。 geocoder.geocode({ address: adrs }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0].geometry) { // 緯度経度を取得 var latlng = results[0].geometry.location; // 住所を取得(日本の場合だけ「日本, 」を削除) var address = results[0].formatted_address.replace(/^日本、/, ''); rslts.push({address: address, latlng: latlng}); var Options = { zoom: 12, center: latlng, mapTypeId: 'roadmap' }; var map = new google.maps.Map(document.getElementById('gmap'), Options); for(let i in rslts){ let marker = new google.maps.Marker({ position: rslts[i].latlng, map: map }); let infoWindow = new google.maps.InfoWindow({ content: rslts[i].address + '<br />' + rslts[i].latlng.toString() }); marker.addListener('click', function() { infoWindow.open(map, marker); }); } } } else { console.log("Geocodingに失敗しました。。。"); } }); } } } }); |
とりあえず、試しに作ってみたのがこちら。
住所打ち込んで追加って押すとマーカーが追加されていく。
マップは最後に追加した地点がセンターになる感じ。
| 住所 | 経度,緯度 |
|---|---|
| {{ val.address }} | {{ val.latlng.toString() }} |