FrontEnd

JSで緯度経度情報から住所を取得する

投稿日:

はじめに

Google Maps JavaScript APIを利用して、緯度経度の数値から住所を検索する方法を紹介します。

キーを取得する

Google Maps JavaScript APIを利用するにはキーを取得する必要があります。

キーを取得する

下記のページの「キーの取得」ボタンを押して「Create a new project」を選択します。

ポップアップが表示されたらプロジェクト名を入力して「NEXT」をクリックして暫く待つとAPIキーが表示されます。

https://developers.google.com/maps/documentation/javascript/?hl=ja

コード

位置情報から住所を取得するには逆ジオコーディングを利用します。

以下は東京駅の緯度経度情報から住所を取得するコードです。

参考

https://developers.google.com/maps/documentation/geocoding/intro?hl=ja#ReverseGeocoding

https://qiita.com/ikuwow/items/ed5f3c9ee0bd6147b7f3

 

さいごに

緯度経度情報から住所を検索する方法を紹介しました。

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

Vue.js入門その3〜簡単にTODOアプリを作ってみたよ〜

はじめに 7/12 修正 記事下部にて、filterメソッドを使用している箇所がありましたが、forEachの方が適しているとご指摘がありましたので、修正しました。 以前Qiitaの方に投稿した記事で ...

Vue.js入門その1〜基本文法〜

はじめに 軽量JSフレームワークとして有名なVue.js。 最近、Laravelに触れる機会が増えたことと、以前からRails + Vueという構築を耳にするので、今更ではありますが勉強を始めようと思 ...

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

1 はじめに2 vue-routerのインストール3 サーバーサイドの改修3.1 APIに詳細(show)を追加3.2 元となるビューファイルを作成3.3 ルーティングの修正4 Vue.jsの実装4. ...

Vue.jsでWebアプリケーションを作る〜Vue.jsの基礎〜

1 はじめに1.1 Vue.jsとは1.2 インストール1.3 Vueアプリケーションを作る2 データを表示する2.1 文字列を表示する2.2 HTMLで表示する3 属性を指定する3.1 インラインス ...

Vue.js入門その5〜マークダウンのリアルタイムプレビューをつくる〜

1 はじめに1.1 環境構築2 marked.jsの設定2.1 CDNのロード2.2 動作確認3 マークダウンを変換して表示3.1 雛形の作成3.1.1 HTML3.1.2 JS3.2 HTMLに変換 ...

フォロー

follow us in feedly

blog-page_side_responsive

2018年3月
 123
45678910
11121314151617
18192021222324
25262728293031

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。