質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.49%

  • JavaScript

    16957questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6914questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4159questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Google マップ

    369questions

    Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,225

SaekoIwaki

score 25

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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/22 17:32

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

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

    ご参考まで

    キャンセル

  • 2016/04/22 17:39

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

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

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

    キャンセル

  • 2016/04/22 18:16

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

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

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

    キャンセル

  • 2016/04/22 18:24

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

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

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


    キャンセル

  • 2016/04/22 21:01

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

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/22 18:03

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

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

    キャンセル

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16957questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6914questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4159questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Google マップ

    369questions

    Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。