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 on Rails で作ったアプリを振り返ってみる

1 はじめに2 全体的なこと2.1 ディレクトリ構成2.2 CSSフレームワーク2.3 Capistranoでのデプロイ3 axiosのラッパー4 Vuex4.1 ログインの状態管理5 Router6 ...

[Rails + Materialize] パンくずリスト用のヘルパーを作成した

1 はじめに2 パンくずリストを上書き2.1 サンプルのHTML2.2 CSSの上書き3 ヘルパーにする4 さいごに はじめに またまたMaterialize関連の記事になります。 Materiali ...

JQueryとmark.jsでマークダウンのリアルタイムプレビューをつくる

1 はじめに1.1 環境2 mark.js2.1 公式ドキュメント2.2 インストール2.3 実際に使用してみる2.4 オプションについて3 プレビュー機能3.1 vue.jsに関して3.2 JQue ...

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

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

Vuexの機能と使い方

1 はじめに2 Vuexとは2.1 Single Source of Truth2.2 状態の取得、更新のカプセル化2.3 単方向データフロー3 Vuexのストア3.1 ステート3.2 ゲッター3.3 ...

フォロー

follow us in feedly

blog-page_side_responsive

2018年3月
« 2月 4月 »
 123
45678910
11121314151617
18192021222324
25262728293031

アプリ情報

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