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"aUser=quotaUser:175) 6 at PM._.n.enabled_changed (directions.js:118) 7 at Fd (js?key=key&libraries=geometry"aUser=quotaUser:77) 8 at PM._.S.bindTo (js?key=key&libraries=geometry"aUser=quotaUser:176) 9 at Object.wk (directions.js:131) 10 at js?key=key&libraries=geometry"aUser=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から問い合わせ)は異なります。
これによって不具合は出ないかと思いますが、念の為です。
回答1件
あなたの回答
tips
プレビュー