Google map apiを使ったルート保存をしたい

Question

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 + "メートル";



}

Answer 1

ここにサンプルがあります。

【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

Comments

[CodeLab]

やってみないとという部分がありますが、どちらにしても道路を通るようなルートになってしまうので、たとえば公園を突っ切るみたいなルートがうまく表現できない気がします。

あと、日本国内ではまだあまりデータがないみたいでBICYCLINGもWALKING場所によっては対応してないみたいなエラーになった記憶があります。

ご参考まで

[kei344]

> たとえば公園を突っ切るみたいなルートがうまく表現できない
言われてみればそうですね。

> 日本国内ではまだあまりデータがないみたいでBICYCLINGもWALKING場所によっては対応してないみたいなエラーになった記憶があります
そうなのですね、知見の共有ありがとうございます！ 最初期のカーナビのような状態なのでしょうね。

どういった目的でデータを作ったり集めたりするかにもよりますが、GPSロガーでデータ収集して補正してマッピングが一番正確になりそうな気がします。

[SaekoIwaki]

kei344様
参考URLありがとうございます。
仰るとおりDirectionsTravelModeがDRIVINGになってました。WALKINGでしたね。

調べて色々とvar hoge = ○○○.getPosition();の○○○の部分に入れてみたのですが、どうしてもoriginとdestinationの座標取得ができません。
markerを使ってる場合の資料はあったのですが、ルート表示の場合の座標取得は探しきれませんでした。
もし分かれば、どのようにしてoriginとdestinationの座標取得をすればよろしいでしょうか?

CodeLab様が仰るとおり、徒歩ではルートは完璧ではないみたいですね。
陸橋に階段がある場合等は徒歩モードでも認識できずドライブモードのルート
になってしまいますので、ここらへんは妥協致します。

[kei344]

> originとdestinationの座標取得
ブラウザのAPIで座標を得るのか住所から得るのかマップをクリックで得るのか、どういう手段で、どういうキーワードで、座標を得るかによります。

【マップ（地図）をクリックしてルート経路検索／Google Maps Directions API V3】
http://waox.main.jp/news/maps/v3/example/direction-sanmple1.html

どういうインターフェイスを作るつもりなのかによりますが、基本的に先ほどのページの例の中にヒントがあると思いますよ。

[SaekoIwaki]

kei344様
ご返事ありがとうございました。

頂いた参考URLを元に一から組み直してみます。
大変勉強になりました。ありがとうございます。

Answer 2

基本的にこの方法でいいと思いますが、このAPIは道路のルート検索に使うものなので、ランニングコースみたいな道路以外を走る可能性があるものには使いにくいのではと思います。

単純にクリックした座標を配列として保存して、それをつないで表示するというような感じにするしかないと思います。

Comments

[SaekoIwaki]

回答有難うございます。
それとは関係ないですが、DirectionsTravelModeがDRIVINGになってました。WALKINGでしたね。

やはりマーカーを増やすしか無いですかね?
最初はwaypointsでマーカーを増やして3点から4点程中間地点を作って
保存しようと思ったのですが、スタート地点とゴール地点が同じなので
わざわざマーカーの中間地点を増やすのはあまりスマートな方法では無いかなと
思いこの質問をしました。