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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

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

Google マップ

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

Q&A

解決済

1回答

1206閲覧

Google MAPS APIのDirections APIをサーバー側からrequestを投げてresponseを受け取った後に、既存の地図にresponseの内容を反映させる方法について

k.t.est

総合スコア49

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

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

Google マップ

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

0グッド

0クリップ

投稿2018/12/10 02:39

編集2018/12/11 01:21

ajaxで下記PHPにてDirections APIに問い合わせを行い、受け取ったresponseを利用して、
既に作成されている地図上に道路に沿った線を引きたいのですが、
受け取るresponseの中の、下記PHPコード内でいうと$route["route_data"]["routes"]["legs"]["steps"]["travel_mode"]が設定されておらず、エラーが表示されます。

どのようにすればtravel_modeが設定されますでしょうか?
ご教示戴ければ幸甚で御座います。

php

1$data["start"] = スタート地点の緯度,経度 2$data["end"] = 目的地の緯度,経度 3 4//Directions APIに問い合わせ 5$ch = curl_init('https://maps.googleapis.com/maps/api/directions/json?origin='.$data["start"].'&destination='.$data["end"].'&avoid=highways&mode=walking&units=metric&key=key' ); 6curl_setopt ($ch, CURLOPT_RETURNTRANSFER, TRUE); 7$res = curl_exec($ch); 8$route_data = json_decode($res,true ); 9 10//ここから追加 11 $request_data = array( 12 "request" => array( 13 "origin" => array( 14 "lat" => explode(",",$data["start"])[0], 15 "lng" => explode(",",$data["start"])[1], 16 ), 17 "destination" => array( 18 "lat" => explode(",",$data["end"])[0], 19 "lng" => explode(",",$data["end"])[1], 20 ), 21 "travelMode" => "DRIVING", 22 ) 23 ); 24 $route_data = array_merge($route_data, $request_data); 25//ここまで 26//さらに追加 27 $replace_array = array( 28 "bounds" => array( 29 "north" => 北端, 30 "east" => 東端, 31 "south" => 南端, 32 "west" => 西橋, 33 ), 34 ); 35 36 //元の配列のboundsと入れ替え 37 $route_data["routes"]["0"] = array_replace($route_data["routes"]["0"],$replace_array); 38//ここまで 39 40$route[] = array( 41 "start" => explode(",",$data["start"]), 42 "end" => explode(",",$data["end"]), 43 "route_data" => $route_data, 44 ); 45 46echo json_encode($route);//この内容をjavascriptに渡す

javascript

1//既存の地図の呼び出し 2var home = 地図の中心地の緯度,経度 3var latlng = new google.maps.LatLng(home.lat,home.lng); 4var opts = { 5 zoom: 12, 6 center: latlng, 7 mapTypeId: google.maps.MapTypeId.ROADMAP, 8 }; 9 10var map = new google.maps.Map(document.getElementById("map_canvas"), opts); 11 12//PHPから受け取ったデータ($route["route_data"])をjavascriptに渡す 13var response = JSON.parse(result)[0].route_data; 14 15//地図に書き入れる 16var rendererOptions = { 17 map: map, // 描画先の地図 18 draggable: false, // ドラッグ不可 19 //preserveViewport: true // centerの座標、ズームレベルで表示 20 suppressMarkers: true, // デフォルトのマーカーを削除 21 preserveViewport: true, // true を指定するとビューの移動(ルート全体を表示する)を行いません。 22 polylineOptions: { 23 strokeColor: '#ff0000', 24 strokeOpacity: 0.8, 25 strokeWeight: 10 26 } 27 }; 28directionsDisplay = new google.maps.DirectionsRenderer( rendererOptions ); 29directionsDisplay.setDirections( response ); 30directionsDisplay.setMap(map); 31 32});

###エラー内容①

javascript

1//エラー内容 2Uncaught (in promise) TypeError: Cannot read property 'travelMode' of undefined 3at directions.js:131 4 at _.ww.f.(anonymous function) [as getEnabled] (https://maps.google.com/maps-api-v3/api/js/35/4/intl/ja_ALL/util.js:31:236) 5 at PM._.S.get (js?key=key&libraries=geometry&quotaUser=quotaUser:175) 6 at PM._.n.enabled_changed (directions.js:118) 7 at Fd (js?key=key&libraries=geometry&quotaUser=quotaUser:77) 8 at PM._.S.bindTo (js?key=key&libraries=geometry&quotaUser=quotaUser:176) 9 at Object.wk (directions.js:131) 10 at js?key=key&libraries=geometry&quotaUser=quotaUser:205

###エラー内容②

Uncaught Jc {message: "not a LatLngBounds or LatLngBoundsLiteral: unknown property northeast", name: "InvalidValueError", stack: "Error↵ at new Jc (https://maps.google.com/maps/…taUser=quotaUser:205:5489)"}message: "not a LatLngBounds or LatLngBoundsLiteral: unknown property northeast"name: "InvalidValueError"stack: "Error↵ at new Jc message: "not a LatLngBounds or LatLngBoundsLiteral: unknown property northeast" name: "InvalidValueError" stack: "Error↵

###Directions APIから得たresponse(PHP内の$route["route_data"])

javascript

1//JSON 2[{ 3 "start":["35.705825","139.845428"], 4 "end":["35.704571","139.846222"], 5 "route_data":{ 6 "geocoded_waypoints":[ 7 { 8 "geocoder_status":"OK", 9 "place_id":"ChIJe1mQ26SIGGAR0elQ7U7lOEk", 10 "types":[ 11 "bus_station", 12 "establishment", 13 "point_of_interest", 14 "transit_station"] 15 }, 16 { 17 "geocoder_status":"OK", 18 "place_id":"ChIJWf8dg6SIGGARBHv-iXil1Eo", 19 "types":["premise"] 20 } 21 ], 22 "routes":[{ 23 "bounds":{ 24 "northeast":{ 25 "lat":35.70582900000000137197275762446224689483642578125, 26 "lng":139.846198100000009389987098984420299530029296875 27 }, 28 "southwest":{ 29 "lat":35.7045624000000003661625669337809085845947265625, 30 "lng":139.845427900000004228786565363407135009765625 31 } 32 }, 33 "copyrights":"Map data \u00a92018 Google, ZENRIN", 34 "legs":[ 35 { 36 "distance":{"text":"0.2 km","value":159}, 37 "duration":{"text":"1 min","value":38}, 38 "end_address":"Japan, \u3012132-0035 T\u014dky\u014d-to, Edogawa-ku, Hirai, 4 Chome\u22124, \u30b8\u30e7\u30a4\u30d7\u30e9\u30b6\u5e73\u4e95", 39 "end_location":{ 40 "lat":35.7045624000000003661625669337809085845947265625, 41 "lng":139.846198100000009389987098984420299530029296875}, 42 "start_address":"Hirai 4 Chome, 4 Chome-9 Hirai, Edogawa-ku, T\u014dky\u014d-to 132-0035, Japan", 43 "start_location":{ 44 "lat":35.70582619999999707260940340347588062286376953125, 45 "lng":139.845427900000004228786565363407135009765625}, 46 "steps":[ 47 { 48 "distance":{"text":"4 m","value":4}, 49 "duration":{"text":"1 min","value":1}, 50 "end_location":{ 51 "lat":35.70582900000000137197275762446224689483642578125, 52 "lng":139.845475499999992052835295908153057098388671875 53 }, 54 "html_instructions":"Head <b>east</b> toward <b>\u3086\u308a\u306e\u304d\u6a4b\u901a\u308a</b>/<b>\u90fd\u9053449\u53f7\u7dda</b>", 55 "polyline":{"points":"mx|xE}pptY?I"}, 56 "start_location":{ 57 "lat":35.70582619999999707260940340347588062286376953125, 58 "lng":139.845427900000004228786565363407135009765625 59 }, 60 "travel_mode":"DRIVING" 61 }, 62 { 63 "distance":{"text":"0.2 km","value":155}, 64 "duration":{"text":"1 min","value":37}, 65 "end_location":{ 66 "lat":35.7045624000000003661625669337809085845947265625, 67 "lng":139.846198100000009389987098984420299530029296875 68 }, 69 "html_instructions":"Turn <b>right</b> onto <b>\u3086\u308a\u306e\u304d\u6a4b\u901a\u308a</b>/<b>\u90fd\u9053449\u53f7\u7dda</b><div style=\"font-size:0.9em\">Destination will be on the left</div>", 70 "maneuver":"turn-right", 71 "polyline":{ 72 "points":"mx|xEgqptYJCn@_@PG|@c@tAo@ZO" 73 }, 74 "start_location":{ 75 "lat":35.70582900000000137197275762446224689483642578125, 76 "lng":139.845475499999992052835295908153057098388671875 77 }, 78 "travel_mode":"DRIVING" 79 } 80 ], 81 "traffic_speed_entry":[], 82 "via_waypoint":[] 83 }], 84 "overview_polyline":{ 85 "points":"mx|xE}pptY?IJC`Ag@nDcB" 86 }, 87 "summary":"\u3086\u308a\u306e\u304d\u6a4b\u901a\u308a/\u90fd\u9053449\u53f7\u7dda", 88 "warnings":[], 89 "waypoint_order":[] 90 }], 91 "status":"OK" 92 } 93}]

###試したこと
PHPからDirections APIに問い合わせる方法が悪いと思い、modeをwalkingからdriving、また設定しないという方法を試してみましたが、状況は変わらずでした。

###API_KEYについて
既存のMAPの呼び出し用のAPI_KEY(jsから問い合わせ)と、サーバーサイドからのDirections APIへの問い合わせ用API_KEY(phpから問い合わせ)は異なります。
これによって不具合は出ないかと思いますが、念の為です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2018/12/10 03:33

responseの内容をご提示いただくことは可能ですか? また、Cannot read property 'travelMode' of undefined というエラーは $route["route_data"]["routes"]["legs"]["steps"]["travel_mode"]が設定されていないことを意味していませんが、そちらはご理解されていますか?
CHERRY

2018/12/10 05:43

JavaScript 側の result って、どうやって受け取っているのでしょうか?
k.t.est

2018/12/10 06:42

Lhankor_Mhy様、Directions APIから受け取った内容を追記致しました。
k.t.est

2018/12/10 06:43

CHERRY様、ajaxでPHPから受け取っております。
Lhankor_Mhy

2018/12/10 07:18

『Directions APIから得たresponse』とは、javascriptにおける response変数の中身ではなくて、PHPにおける $route_data変数の中身であると理解しましたが、それで間違いありませんか?
k.t.est

2018/12/10 07:24

ちょっと分かり難かったですね。タイトルを変更します。javascriptにおけるresponseの中身は、$route_data["route_data"]となります。
k.t.est

2018/12/10 07:28

$route["route_data"]["routes"]["legs"]["steps"]["travel_mode"]はDrivingで設定出来ましたが、Lhankor_Mhy様の仰る通り、エラーは変わらず出ております。
Lhankor_Mhy

2018/12/10 07:34

コードを見る限り、そうなっていないように思えるのですが…… curl_exec の戻り値が $res、$res のJSONパースしたものが $route_data、$route_data をラップしたのが $route、ajax で返すデータが $route、$route[0].route_data が response変数に入っているのでは? コードを読む限りでは、response変数には undefined が入っていそうな気がするんですけれども、いかがですか?
Lhankor_Mhy

2018/12/10 07:36

PHPの方ではなく、javascriptでの値を見て欲しいのですが…… エラーは js のエラーですよね?
Lhankor_Mhy

2018/12/10 07:40

コメント行き違ったようですが、$route["route_data"]がご提示のものでしたら、JSON.parse(result)[0] は やはり undefined になりそうな気がします。
k.t.est

2018/12/10 07:54

console.log(response)してみたのですが、結果は{geocoded_waypoints: Array(2), routes: Array(1), status: "OK"}となっており、正常に取れているようで御座います。仰られる通り、エラーはjsで発生しておりまして、responseまでは正常に取れているという前提でご回答頂ければ幸甚で御座います。(PHPで$route=ではなく、$route[]=としておりましたので、修正します。申し訳御座いません。)
Lhankor_Mhy

2018/12/10 08:46 編集

API のデモを見てみましたが、どうやら、(new google.maps.DirectionsService).route は単純にレスポンスをレンダラに渡すだけのメソッドではなさそうです。request というプロパティが追加されていました。
k.t.est

2018/12/10 09:01

requestの内容は、PHPで既にGoogle側に投げているので、問題ないと思った次第ですが、そうではないということでしょうか?
Lhankor_Mhy

2018/12/10 09:07

うーん、ただ、APIの仕様書を読む限りだと、setDirections メソッドの引数は DirectionsResult となっていて、仕様書の動作と違うんですよねえ……? 一応、回答欄にまとめてみます。
guest

回答1

0

ベストアンサー

解決にはならないと思うのですが、調べたことをまとめます。解決方法は他の回答者諸兄にゆだねます。

Directions Service  |  Maps JavaScript API  |  Google Developers
↑の動作を見てみると、directionsService.routeがコールバックに渡す値が、DirectionsResultとは異なっていました。

js

1{ 2 "geocoded_waypoints": [ 3 { 4 "geocoder_status": "OK", 5 "place_id": "ChIJ7cv00DwsDogRAMDACa2m4K8", 6 "types": [ 7 "locality", 8 "political" 9 ] 10 }, 11 { 12 "geocoder_status": "OK", 13 "place_id": "ChIJ-Y7t-qm02IcRW-C7IsrqOb4", 14 "types": [ 15 "locality", 16 "political" 17 ] 18 } 19 ], 20 "routes": [ 21// (略) 22 ], 23 "status": "OK", 24 "request": { 25 "origin": { 26 "query": "chicago, il" 27 }, 28 "destination": { 29 "query": "st louis, mo" 30 }, 31 "travelMode": "DRIVING" // ←これ 32 } 33}

一方で、サーバからのレスポンスはDirectionsResult的なものに見えます。
なので、DirectionsService.routeがサーバからのレスポンスをよきにはからってコールバック関数に渡しているのではないか、と思いました。

ところが、APIのレファレンスによると、

setDirections(directions)

Parameters:
directions: DirectionsResult
DirectionsRenderer class | Directions  |  Maps JavaScript API  |  Google Developers

となっており、
DirectionsResult interface | Directions  |  Maps JavaScript API  |  Google Developers
にはrequestというプロパティがないのです。
仕様書と実装が違うような気がします。

ただ、

Note that though this result is "JSON-like," it is not strictly JSON, as it indirectly includes LatLng objects.

DirectionsResult interface | Directions | Maps JavaScript API | Google Developers

とあり、字面からはDirectionsResultはレスポンスJSONをパースしただけのものとは違うもの、であるように読めますので、素直にDirectionsService.routeを使った方がいいのかもしれません。

投稿2018/12/10 09:26

Lhankor_Mhy

総合スコア35871

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

k.t.est

2018/12/10 09:38

ご回答有難う御座います。元々はJSでやっていたのですが、query per secondの制限が厳しかった為にPHPからリクエストする方法に切り替えた次第でした。ですが、結局PHPで取得できるgoogleからのresponseをsetDirectionsに渡せないならどうしようもないですね。
Lhankor_Mhy

2018/12/10 09:49

request プロパティを生やして渡せばとりあえず動作しそうな気がするのですが、仕様書に書いていないことなので、いずれ動作しなくなる可能性が高いのではないかと思いました。
k.t.est

2018/12/10 10:22

有難う御座います。とりあえずPHPにてrequestプロパティを追加したところ、当初のエラー内容①についてはクリアすることができました。 見落としていたのですが、もともとエラー内容②も出ていたようで、requestプロパティを追加してもエラー内容②は残っております。これに対応する方法はお分かりになられますでしょうか?ご教示頂ければ幸甚で御座います。
Lhankor_Mhy

2018/12/11 00:41

コメント、分かりにくかったでしょうか? "bounds":{ "northeast":{ "lat":35.70582900000000137197275762446224689483642578125, "lng":139.846198100000009389987098984420299530029296875 }, "southwest":{ "lat":35.7045624000000003661625669337809085845947265625, "lng":139.845427900000004228786565363407135009765625 } }, を、こう直す、ということです。 "bounds":{ "north":35.70582900000000137197275762446224689483642578125, "east":139.846198100000009389987098984420299530029296875, "south":35.7045624000000003661625669337809085845947265625, "west":139.845427900000004228786565363407135009765625 },
k.t.est

2018/12/11 01:23

追加コメント有難う御座います。お陰様で全てエラーはなくなりました!しかしながら、rendererOptionsを追加し赤色のポリラインを引こうと考えたのですが、地図上には何も表示されないという状況です。どのようにすればいいかアイデア御座いますでしょうか?
Lhankor_Mhy

2018/12/11 03:19

色々試してみましたが、簡単にはハックできないようです。 むしろ、リクエストの方をオーバーライドする方がマシに思えてきてます。
k.t.est

2018/12/11 03:50

色々とお試し頂きまして有難う御座います。結局Lhankor_Mhy様の当初のご意見通り、大人しくJSで処理した方がいいという結論になりそうですね。。。 念の為、もう少し他の方からのご回答も待ってみたいと思います。 (view数もあまりない為、期待はできませんが、、、)
Lhankor_Mhy

2018/12/11 04:44

あとは、ルート自体は得られているのでAPIを使ってPolyLineを引いてしまう、というのもありかと思います。
k.t.est

2018/12/11 06:18

大変恐縮ですが、「APIを使ってPolyLineを引く」方法につき、具体的にご教示いただくことは可能でしょうか?宜しくお願い申し上げます。
k.t.est

2018/12/11 08:30

有難う御座いました! PHPで取得できたstepsを利用して、無事polylineをoverlayすることができました。当初想定していた方法とは異なりましたが、目的を達成することが出来ました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問