GoogleMapAPIv3でルート上の座標を取得

質問

http://okwave.jp/qa/q6978088.html

上記URLの過去の質問を見て疑問に思いましたので質問させていただきます。
上記URLでもありましたようにルート上の座標を取得しようとして

var arr;
var directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
// ヒットした結果を表示
directionsDisplay.setDirections(result);
arr = result.routes[0].overview_path; // ルートの全行程を表す
}
});

alert(arr.length);

と記述しました。 arr には経路検索のルート上の座標が含まれているのですがこれを
取り出すためにはどうすればよいでしょうか。取り出してgoogleMap上にマーカーとして
表示したいと思っています。
directionsService.route（）{ } の外では alert(arr.length);
と記述しても　「lengthの値を取得できません。オブジェクトがNullまたは未定義です。」
となりarrを取得できないようです。
また、仮に取得できるようになったとして取得した座標の配列を
どうやって地図上にマーカーとして表示させればよいでしょうか。
今はマーカーを表示させるのに

var markerOpts4 = {position: new google.maps.LatLng(36, 137), 　map: mapObj}
var marker4 = new google.maps.Marker(markerOpts4);

というように１つずつマーカーを設定しています。
取得した座標の配列を上記の記述方法にどう組み込めばよいのかいまいちよくわからないです。

回答No.1

fujillin · ベストアンサー

ご提示のコードでarrに結果を取得は可能ですが、alert(arr.length)の処理の部分との実行順序が制御できていません。
そのため、結果を取得する前にalertが実行されてしまっていて、ご質問のようなエラーになっていると想像されます。

function(result, status) {～}の部分はコールバックの形式になっているので、検索処理が終わって結果が返されてから実行するようになっていますが、一方で、alertの方はそのタイミングを待たずに（関係なく）、検索の要求を送信した後に処理順序通りに実行されます。
検索のレスポンスが非常に速ければエラーが出ない可能性もありますが、送受信に多少なりとも時間がかかるので、レスポンスのある前に実行されてしまう可能性が高いです。

これを避けるには、directionsDisplayを呼び出しているのと同じように、コールバック関数の中から処理関数を呼ぶようにすればよろしいかと。（あるいは、十分に時間が経過してから実行するとか…）
例えば
　arr = result.routes[0].overview_path;
　test(arr);
のようにしておいて、別にtest()を定義しておけばよろしいでしょう。
　function test(arr){ alert(arr.length); }
（結果的に、グローバルな変数に記憶させる必要もなくなると思います。）

＞取得した座標の配列を上記の記述方法にどう組み込めばよいのかいまいちよくわからないです。
返される結果が、オブジェクトの配列になっていますので、マーカー表示をループにしておいて、その配列分だけLatLngを変えてマーカーを表示するようにしてあげればよいのではないでしょうか？

ただし、overview_pathを使うと相当な数が返されるようなので、マーカーだらけになってしまうのではないでしょうか。
簡単な実験をしてみましたが、DirectionsRenderer.setDirections()でpanelに表示される項目には、（想像ですが）、DirectionsStepが使用されているみたいです。（こちらの方がステップにまとめられている分、数が少なくなっているようです。当然ながら、こちらからもLatLngデータは取得可能です。）

resultオブジェクトの詳しい仕様に関しては、（ご参照の回答にもありますが）リファレンスをご参照ください。
http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html#DirectionsResult

お礼

お礼送れて申し訳ありません。
ご提示いただいたように
コールバック関数の中でメソッドをコールするようにして
解決いたしました。ありがとうございました。