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


関連記事

フロントエンドで動画デコレーション&レンダリング

1 はじめに2 レンダリング方法の検討3 背景部分のキャプチャ3.1 modern-screenshotの導入3.2 DOMのキャプチャ4 ffmpeg.wasmで画像と動画を合成4.1 ffmpeg ...

Vue CLIでPWAが簡単に実装できる 〜 Service Worker と A2HS 〜

1 はじめに2 環境構築2.1 Vue CLIをインストール2.2 プロジェクトを作成2.3 PWA選択時に追加されるファイル2.4 動作確認時の注意3 Service Worker3.1 Servi ...

icon

Orvalを使ってFastAPIが生成したOpenAPIからAPIクライアントを生成してみる

1 はじめに2 FastAPI側の準備3 orvalのセットアップとコード生成4 生成されたコードの確認5 さいごに6 おすすめ書籍 はじめに orvalはOpenAPIからTypeScript用のA ...

React Router v7 + Cloudflare PagesでのOGPタグ設定とOGP画像生成

1 はじめに2 OGPタグの設定2.1 全体で共通の設定2.2 meta()関数による動的な設定3 OGP画像の生成3.1 @vercel/ogの導入3.2 middlwareの実装4 OGPチェッカ ...

【Vue.js】コンポーネントのテストコードをvue-test-utilsとJestで実装

1 はじめに2 セットアップ3 コンポーネントのテスト3.1 Shallow 描画3.2 基本的な例3.3 プロパティを渡す3.4 ユーザーの操作をシミュレーションする3.5 イベントを検証する3.6 ...

フォロー

blog-page_side_responsive

2018年3月
 123
45678910
11121314151617
18192021222324
25262728293031

アプリ情報

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