Google Maps API と YOLP 経路地図API をマッシュアップしてみた。

左の Google 地図で、スタート『S』とゴール『G』のアイコンを好きな場所にドロップして、 『⇒』ボタン を押すと右に経路地図の画像が表示される。

routemap : Google Maps JavaScript API x Yahoo! Open Local Platform 経路地図API
routemap : Google Maps JavaScript API x Yahoo! Open Local Platform 経路地図API

経路地図APIでできること

出発地から目的地までの最適なルート案内図を生成でき、ウェブページに自由にはり付けて利用できます。

経路地図APIの主な機能は以下となります。

・2点以上の地点を指定すると自動的に経路探索され、ルート案内図が生成されます。
 短距離の場合は徒歩用のデータ、長距離の場合は車用のデータを参照して経路探索されます。
・経路を複数指定できます。
・マーカー(ピンアイコン)、フリーテキストをルート案内図に追加できます。
・経路地図APIが出力する地図は静的な画像ですので、JavaScriptの実行環境は必要ありません。

Yahoo!デベロッパーネットワーク - 地図 - 経路地図
経路地図APIは、指定したルート付近を強調した地図の画像を生成することができる ウェブAPI です。タグの src 属性に API の URL をセットすることで、経路地図画像をウェブページやブログに埋め込むことが可能です。

(中略)

開発当初は simple という名前ではなく alpslab reloaded というコード名でした。
昔々......、知っている人は知っている ALPSLAB という地図の実験サイトがありました。
simple はそこで公開していた『ALPSLAB 略地図』のデザインを再現したものです。

ちなみに、現時点では経路地図上のすべてのテキストには 『あずきフォント』を使っています。この手書き感いいですね(・∀・)

「経路地図API」で道案内に特化した地図をつくる (Yahoo! JAPAN Tech Blog)

地図の4スタイルの画像を生成してみた。

名古屋駅から名古屋城。

style=base:standard
Yahoo! Open Local Platform 経路地図API standard

style=base:classic
Yahoo! Open Local Platform 経路地図API classic

style=base:grayish
Yahoo! Open Local Platform 経路地図API grayish

style=base:simple
Yahoo! Open Local Platform 経路地図API simple

サンシャイン栄から名古屋錦ワシントンホテルプラザ。

style=base:standard
Yahoo! Open Local Platform 経路地図API standard

style=base:classic
Yahoo! Open Local Platform 経路地図API classic

style=base:grayish
Yahoo! Open Local Platform 経路地図API grayish

style=base:simple
Yahoo! Open Local Platform 経路地図API simple

作っててちょっと気になったこと。

どうやら </body> のあとに script タグを入れていたのがダメだったっぽい。 </body> より前に trackfeed や trackword あたりで引っかかるときがあってページの読み込みが終わらなくなったり。でも、修正するとこのへんでひっかからないので不思議。

Google Chrome ではこんな問題出なかったけど、Mozilla Firefox でぜんぜんGoogle地図が出てこないことが頻繁に起こって困ってた。とりあえず JavaScript のコードがある script タグを </head> の前に移動したら動くようになった。

Ref.
- routemap : Google Maps JavaScript API x Yahoo! Open Local Platform 経路地図API
- Yahoo!デベロッパーネットワーク - 地図 - 経路地図
- 「経路地図API」で道案内に特化した地図をつくる (Yahoo! JAPAN Tech Blog)

tags: google_maps_api yahoo_maps_api routemap

Posted by NI-Lab. (@nilab)