ラズパイ+GPSで現在地をGoogle Map上に表示したい
解決済
回答 2
投稿
- 評価
- クリップ 2
- VIEW 5,102
困っていること
ラズパイ+GPSモジュールを使ってターミナルから現在の緯度経度を取得することはできているのですが、現在地をGoogle Mapなどで表示（あなたの現在地はここです、というようなものです）が出来なくて困っています。
使用環境
・Raspberry Pi 3
・GPSCAP
困っていることの内容
GPSCAPはラズパイマガジン2017年4月号との連動企画で販売されているGPSモジュールで、紙面の指示に従って、下記のようにターミナルから入力することで、ターミナル上に緯度経度を毎秒ごとに表示するところまでは出来ています。
$cd ~/GPSCAP
$./tude.py
すると、下記画像のように緯度経度が表示されます。
※緯度経度の情報は一部伏せてあります
また、付属の別のPythonのプログラムを使うことで、.txt形式で時刻/緯度経度/高度/速度etc...の情報を保存することもできました。
何度もGoogleで検索してみましたが、いわゆる"GPSロガー"（通って来たルートを後からGoogle Map等で読み込んで表示させる）ものはあっても、リアルタイムでGPSモジュールの現在位置をGoogle Mapで表示するものはありませんでした。
（1つだけTrackrr.ioを使うやり方が書いてあるウェブサイトがありましたが、Trackrr.ioに新規登録しようとしたところ、何度やっても登録失敗になってしまったので諦めました）
プログラム「超」初心者なので、どのようなスクリプトをどう書けばいいのかというところまで、丁寧にご教授頂けると幸いです。
よろしくお願い致します。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
楽しそうですね。
どのようなスクリプトをどう書けばいいのかというところまで、丁寧にご教授頂けると幸いです。
とのことですが・・・糸口にでもなればと思い概略だけ伝えます。
1、まず、GoolgleMapの機能を利用するとことですので、googleのAPI keyを取得しましょう。
2、サーバーを立てて、index.htmlを書きます。その中にコードを埋め込みます。そのコードっていうのは
3、画面にGoolgleMapを表示させるコードを書きます。それはhtml側でリクエストのコールバックに指定します。
4、googleに投げるリクエストのレスポンスを画面に反映させるコードを書きます。
5、最後にGPSCAPから取得した緯度経度情報、google側に投げるコードを書きます。
質問が広いので・・・こんな回答しかできませんでした。
作ろうとしておられるものが、様々なロジックの組み合わせで完成するように思われます。
よって、各々のロジックに分解して進んでいかれ、また躓いたときに質問されることをお勧めします。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
#maps{
height: 400px;
}
</style>
</head>
<body>
<div id="maps"></div>
<script src="//maps.googleapis.com/maps/api/js?key={APIキー}&callback=initMap" async></script>
<script>
function initMap() {
var mapPosition = {lat: 取得した緯度, lng: 取得した経度}
var mapArea = document.getElementById('maps');
var mapOptions = {
center: mapPosition,
zoom: 16,
};
var map = new google.maps.Map(mapArea, mapOptions);
}
</script>
</body>
</html>
JavaScript を埋め込むとこんな感じだと思いますが。
APIキー
取得した緯度経度は適宜変えてください。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 89.04%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2018/02/08 16:27
もしよろしければ、GPSCAPから取得した緯度経度情報をGoogle側に投げるコードについて、詳しく教えて頂けますでしょうか。