Google Maps API と YOLP 経路地図API をマッシュアップしてみた。
左の Google 地図で、スタート『S』とゴール『G』のアイコンを好きな場所にドロップして、 を押すと右に経路地図の画像が表示される。
⇒ 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
style=base:classic
style=base:grayish
style=base:simple
サンシャイン栄から名古屋錦ワシントンホテルプラザ。
style=base:standard
style=base:classic
style=base:grayish
style=base:simple
作っててちょっと気になったこと。
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)