スポンサードリンク

Category Archives: ルート経路検索 Google Directions API

Waypoint(中間地点、経由地点)の複数設定+ルートディスプレイ/ルート検索API(Direction API)

◆ Google Maps API v3 / Waypoint(中間地点、経由地点)の複数設定+ルートディスプレイ

ルート検索の基本マップに、複数のwaypoint(経由地点)と+ルートディスプレイを追加していきます。

基本マップはスタート(origin)とゴール(destination)だけでしたが、これにWaypoint(中間地点)を下記の赤字のように追加します。

var request =
{
origin: “東京”,
destination: “大阪”,
waypoints:[
{
location: “静岡”
},
{
location: “名古屋”
}
],

ここで試しておきたいのが locationの指定の方法。基本的には、Google Mapのインフォウィンドウに表示される名称をコピペして張り付ければ、ある程度の大型施設であれば対応してくれます。

Read more »

ルート検索の基本マップ/ルート検索API(Direction API)

◆ Google Maps API v3 / ルート検索の基本マップ

ルート検索APIの基本マップです。スタート地点と終点を指定するだけで、地図右側にルートディスプレイはありません。


Read more »

トータルの合計距離+地図から行きたい場所を探して、出発、中継点、到着点を入力クリックしてドライブルート経路検索

◆Google Maps API V3 + Directions API (トータルの合計距離を表示させたい)

デモギャラリーサンプルをいじってみたが、何か足りん。

そう、地図右側に表示されるルート表示のサイドバーでは、トータルの距離がわからないのである。ぐっ不便。

しかしながら、デモギャラリーでなく、Google Maps Javascript API V3 Examplesのサンプルを見ていたらtotal distanceを表示したサンプルが・・・。

せっかくなので、MarkerClustererと組み合わせて、MarkerClustererで表示されたアイコン間をドライブした気分でルート検索した合計距離を表示させてみる。

Read more »

マップ(地図)をクリックしてルート経路検索/Google Maps Directions API V3

◆Google Maps API V3 + Directions API (マップ(地図)をクリックしてルート経路検索)

v2と何が違うかは、さておきGoogle Maps JavaScript API V3 デモ ギャラリーから自分のサイトで使えそうなサンプルを試してみる。

コレがのちのちiPhone(アイフォン)用でも使えそう。

このデモギャラリーサンプル、機能が足りないところがあるので追加。

  • Get directions!で表示せた緑色のマーカー(アイコン)も移動できないので、同様に「draggable: true」を追加。
  • 日本で対応していない var mode の “case “bicycling”: mode = google.maps.DirectionsTravelMode.DRIVING;break;”をscriptから削除。
  • HTMLの<option value=”bicycling”>は削除
  • HTMLの input タグで、highway tolls のcheckedはデフォルトに不要なので削除
    • <input type=”checkbox” id=”highways” checked=”checked” />・・・・・一般道優先(チェックすると高速を使わない)
    • <input type=”checkbox” id=”tolls” checked=”checked”/>・・・・・チェックすると有料道路を使わない(※試してみたら有料の橋やバイパス道路を避けた。highwaysとは別)
  • 英語コメントを日本語に書き換えて終わり。

Read more »

2 / 212

スポンサードリンク