目的地アイコン(マーカー)をクリックして現在地からのルート検索結果のルートポリライン(Polylines)と距離を表示DirectionsRendererオプションの3つの使い方(マーカ削除、ルートポリライン削除、インフォウィンドウの非表示)を覚えたところで、目的の地図を作成していきます。<地図構成>地図に複数のアイコン(マーカー)を読み込ませておき、それぞれのマーカーをクリックしたら、模擬でセットした現在地アイコンからのルートと距離を表示させます。1.不要な緑色のディレクションアイコンを消す。2.現在地を模擬でセット3.アイコンをクリックしたらルート検索を行う。4.距離変数を取り出してインフォウィンドウに表示させるってなところでしょうか。デフォルトの地図この記事で紹介した地図(javascriptのコード内の配列からマーカーデータを読み込んで地図を表示するサンプル)を流用します。不要な緑色のアイコンを消してルートポリラインだけ残す。オブジェクトをセットします。緑色のディレクションマーカーが邪魔ですので、suppressMarkersを使って表示されないようにしておきます。次に、現在地を示す模擬マーカーを座標上にセットします。実際には、GeoLocationでGPSから取得した座標が入ることになります。directionsDisplay.setMap(map);アイコンをクリックしたらルート検索を行う。)をハンドルしてやります。;infoWindow.setContent(html);infoWindow.open(map,marker);});ルート検索の関数calcRoute(latlng)内では、direction_changedのイベントリスナーでルート検索の度に距離を収得するための関数computeTotalDistance(result)へハンドルしておきます。ここで出発点(origin)に現在地の変数initialLocation、目的地(destination)に、変数latlngを指定します。classで収得することが出来ます。ルートを得られない場合のレスポンスに使います。true,//最適化された最短距離にする。google.maps.DirectionsStatus.OK){directionsDisplay.setDirections(response);}});}現在地マーカーから目的地アイコン(マーカー)までの距離を収得する。ここで最初に覚えておきたいのは、ルート(route)と区間(legs)です。APIには、次のように書かれています。セットずつ格納されます。含まれています(この数は、ウェイポイントを指定したかどうかによります)。ルートには著作権や警告の情報も含まれています。これらの情報は、ユーザーに対してルート情報を表示するときに一緒に表示しなければなりません。要素で構成されます)。従って、下記scriptは、routres[0]の配列のlegs区間配列の合計値距離をdistance.valueで取り出すものになっていることが判ります。配列内に含まれているdistanceフィールドからvalueで距離を得て、変数totalに格納します。distanceの形式は、valueまたはtextで、valueの場合は、必ずm(メートル)で定義されます。詳しくは、ディレクションAPIの日本語リファレンスのこの辺りを読んでください。kmで今回は表示したいので、distance.valueで得た値を1000で割ってやります。htmlに記述しておきます。1000.}これで出来上がりです。下記コメントがありましたので、本記事に関連して記事を追加しました。下記サンプルにiPhone(アイフォン)用を追加。Chromeで見てください。コードなのかが載っておらず初心者の私にはどうすればできるのかがわかりませんでした。できたらのせてもらえないでしょうか。づづトライされてみて下さい。参考になればいいのですが、新たなこの記事に希望の?ソースとシンプルなサンプルを用意してありますので参照ください。私の拙い文章を理解してくださりありがとうございます。これでまた先に進めそうです。Android端末をベースに開発をしているのですが、いかんせん勝手がわからず困り果てていたので本当に助かりました。ありがとうございました。”さん”が抜けていますね。本当にありがとうございました。google.maps.Mar...WordPressの記事やページの中にカテゴリー毎の記事一覧を表示させるプラグインiPhone(アイフォン)のicloud。カメラの使い方がとっても便利に。chromeを使用して下さい。I.E7、8では見れません。viewsiPhone(アイフォン)のicloud。当サイトのご情報利用につきましては、ご自身の判断によりご使用下さい。各ページへのリンクはご自由にどうぞ。その他クレーム・苦情・要望等は、各記事のコメントからお願いします。要望等の対応には時間をいただきくことを了解の上、コメントしてください。当方回答可能なものであればコメントバックさせて頂きます。