ウェブディレクション ユーザビリティ SEO アクセス解析 デザイン制作 システム webapi使い方サンプル 見本になるサイト

「DirectionsMap」googleMapのストリートビューで目的地までの道のりを順をおって表示していくリッチなマップ作成apiツール

最近はwebサイトの所在地のマップはgooglemapを埋め込んだりする場合がおおくなりましたが、埋め込むだけではもの足りなり方にオススメなのが、「DirectionsMap」というツールです

「DirectionsMap」は出発地点から目的地までの道案内をgoogleのストリートビューで紹介できるものなのです。

為にしこちらに「DirectionsMap」でつくった
東京渋谷駅から東京目黒駅までのマップを埋め込んでみました。



ストリートビュー画面左上の「play」ボタンを押すと渋谷から目黒までの道順をストリートビューで追って映像をながしているのがわかると思います。

■ 作成の仕方 ■■■■■■■■■■■

「DirectionsMap」は

http://tripgeo.com/DirectionsMap.aspx

のページから作成します


「Settings」という欄に「Start Address 」(出発地点)「Destination Address 」(到着地点)という入力欄がありますね。




こちらに「渋谷駅」「目黒駅」と入れたいところですが、このサイトは日本語対応ができていないようなので、日本の地名の場合は、その場所の緯度、経度をいれます

この緯度、経度はgooglemapから調べられます。



例えば「目黒駅」をgooglemapで検索し、その地点を右クリックします。すると、コンテキストメニューに「この場所について」というメニューがでてきますのでそちらをクリックします。

すると、目黒駅の検索をいれた入力バーに、「目黒駅」の緯度経度が表示されます。




この数値をコピーして、「Start Address」にそれぞれ出発地点の緯度経度、「Destination Address」に到着地点の緯度経度をいれてください。



この緯度経度をにゅうりょくしたら、
「create your DirectionsMap ボタン」をクリックします。



すると、googlemapの画像の上にストリートビューの画面がある「DirectionsMap」が作成されます。



またその下に 埋め込みコードがでてきますので、こちらのコードをコピーしてサイトに埋め込めば、ストリートビューで道順を表示する事ができるマップの完成となります




Yahoo!ブックマークに登録     
このエントリーをはてなブックマークに追加

無料素材イラストダウンロード
今週のピッアップ記事
ウェブディレクターズスタッフブログ

メルマガ購読・解除
 
webディレクターズリンク集