Google map apiを使ったルート保存をしたい
- 評価
- クリップ 0
- VIEW 4,705
GoogleマップAPIを使ってユーザーがランニングしたルートを
データベースに保存をしたいのですがどの様にすればルート保存ができるでしょうか?
スタート地点とゴール地点は同じ場所で、ユーザーにルートを作ってもらい
そのルートの座標を取得すれば良いと思うのですが、ルート経路の座標の取得の仕方がわかりません。
座標の取得自体は
var hoge = ○○○.getPosition();
var latitude = hoge.lat(); // 経度 latitude
var longitude = hoge.lng(); // 緯度 longitude
とすれば良いと思うのですが、○○○の部分に何を入れればいいのかわかりません。
以下がGoogleマップAPIを使ったURLなのですが、実際に青い線をドラッグしてディズニーランドを一周したルートを保存した場合どのようにして保存すればよいでしょうか。
ルートドラッグした場所に白い点ができるので、そこの座標を取得すればよいのかと思ったのですが
違いますでしょうか。
よろしくお願いします。
↓html↓
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<div id="gmap"></div>
<div id="result"></div>
↓css↓
#gmap {
width : 1000px;
height: 800px;
}
↓js↓
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true
});
var map = new google.maps.Map(
document.getElementById("gmap"), {
zoom:15,
center: new google.maps.LatLng(35.637940, 139.878516),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
);
google.maps.event.addListener(directionsDisplay, "directions_changed", function() {
calcRoute(directionsDisplay.directions);
});
directionsDisplay.setMap(map);
directionsService.route({
origin: "35.637940, 139.878516",
destination: "35.638549, 139.876770",
travelMode: google.maps.DirectionsTravelMode.WALKING
}, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
calcRoute(response);
console.log(response);
} else {
alert("ルート検索に失敗しました");
}
});
function calcRoute(response) {
var m = 0;
for (var i = 0; i < response.routes[0].legs.length; i++) {
m += response.routes[0].legs[i].distance.value; // 距離(m)
}
document.getElementById("result").innerHTML = m + "メートル";
}
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
ここにサンプルがあります。
【Google Maps API v3使い方/マップ作成方法のサンプル・デモ地図 | WordPressにGoogle Maps API V3!】
http://waox.main.jp/news/?page_id=1086
また、CodeLabさんのおっしゃるように google.maps.DirectionsTravelMode.DRIVING
では高速道路を走ったりします。そこはgoogle.maps.DirectionsTravelMode.BICYCLING
か google.maps.DirectionsTravelMode.WALKING
のどちらかでしょう。
【The Google Directions API(ルート検索)|Google Maps JavaScript API v3|Ajax|PHP & JavaScript Room】
http://phpjavascriptroom.com/?t=ajax&p=googlemapsapiv3_directions
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
基本的にこの方法でいいと思いますが、このAPIは道路のルート検索に使うものなので、ランニングコースみたいな道路以外を走る可能性があるものには使いにくいのではと思います。
単純にクリックした座標を配列として保存して、それをつないで表示するというような感じにするしかないと思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.35%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/04/22 17:32
あと、日本国内ではまだあまりデータがないみたいでBICYCLINGもWALKING場所によっては対応してないみたいなエラーになった記憶があります。
ご参考まで
2016/04/22 17:39
言われてみればそうですね。
> 日本国内ではまだあまりデータがないみたいでBICYCLINGもWALKING場所によっては対応してないみたいなエラーになった記憶があります
そうなのですね、知見の共有ありがとうございます! 最初期のカーナビのような状態なのでしょうね。
どういった目的でデータを作ったり集めたりするかにもよりますが、GPSロガーでデータ収集して補正してマッピングが一番正確になりそうな気がします。
2016/04/22 18:16
参考URLありがとうございます。
仰るとおりDirectionsTravelModeがDRIVINGになってました。WALKINGでしたね。
調べて色々とvar hoge = ○○○.getPosition();の○○○の部分に入れてみたのですが、どうしてもoriginとdestinationの座標取得ができません。
markerを使ってる場合の資料はあったのですが、ルート表示の場合の座標取得は探しきれませんでした。
もし分かれば、どのようにしてoriginとdestinationの座標取得をすればよろしいでしょうか?
CodeLab様が仰るとおり、徒歩ではルートは完璧ではないみたいですね。
陸橋に階段がある場合等は徒歩モードでも認識できずドライブモードのルート
になってしまいますので、ここらへんは妥協致します。
2016/04/22 18:24
ブラウザのAPIで座標を得るのか住所から得るのかマップをクリックで得るのか、どういう手段で、どういうキーワードで、座標を得るかによります。
【マップ(地図)をクリックしてルート経路検索/Google Maps Directions API V3】
http://waox.main.jp/news/maps/v3/example/direction-sanmple1.html
どういうインターフェイスを作るつもりなのかによりますが、基本的に先ほどのページの例の中にヒントがあると思いますよ。
2016/04/22 21:01
ご返事ありがとうございました。
頂いた参考URLを元に一から組み直してみます。
大変勉強になりました。ありがとうございます。