住所から位置情報(latlng)を取得(Geocoding API)

久しぶりにGoogle API触った。

アレコレ組み合わせてコンテンツ作ろうかと思ったけども分解しておかないと、あとで見返して困りそうと思ったのでとりあえず、Geocoding APIの部分だけ使い方を整理する。

 

GCPからGeocoding APIを有効化する。

Maps Javascript API使った時のGCP画面から追加でAPIを有効化する。

認証情報のところからAPIキーと紐づけを行えばすぐに使い始めれます。

 

コールバック関数で値が取れるからthisでちょっと迷子になった。

今回、Vue.jsにGeocoding埋め込もうとしたんだけどcallback functionの中でthisしたらVue dataのアイテムじゃなくなってて取得した結果をVueのリストに反映できないのに気付かずちょっぴり悶々した。

ソース汚いけど・・・、とりあえず目をつぶる😑

 

とりあえず、試しに作ってみたのがこちら。

住所打ち込んで追加って押すとマーカーが追加されていく。

マップは最後に追加した地点がセンターになる感じ。

 


住所 経度,緯度
{{ val.address }} {{ val.latlng.toString() }}

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Related Post