<p class="thumb"><img src="http://web-marketing.zako.org/images/2010/10/directionsmap.jpg" alt="ストリートビューで道案内" title="directionsmap" width="514" height="204" class="aligncenter size-full wp-image-16255" /></p>
<p>会社案内のページにGoogleマップを埋め込んで、会社の場所を紹介したり、なかには道順を案内しているケースも多く見るようになりました。</p>
<p>しかし、ストリートビューで道案内をすれば、よりわかりやすく、親切なコンテンツにすることができますよね。</p>
<p>今回は、そんなことをカンタンに実現できるサービスをご紹介します。</p>
<!--more-->
<h3 class='header-label'>Googleマップの道案内をストリートビューでできる「DirectionsMap」</h3>
<p>「<a class='web-site-link' href="http://tripgeo.com/DirectionsMap.aspx" target="_blank">Directions Map</a>」は、<strong>Googleマップで行う道順案内を、ストリートビューで再生し、ブログやサイトへ埋め込める</strong>サービス。</p>
<p>日本語の地名で指定すると文字化けしてしまいますが、とあるコツを使って緯度・経度から指定すれば、Googleマップだけで道案内するよりもリッチで親切なコンテンツにすることができます。</p>

<h4 class='tips'>池袋駅から目的地までの道案内</h4>
<iframe src='http://s3.tripgeo.com/dirmap/map.htm?from=35.73028,139.711268&to=35.726709,139.713113&region=ja' width='512' height='500' style='padding:0px' marginwidth='0' marginheight='0' frameborder='0' scrolling='no'></iframe>
<p>↑「Play」ボタンを押すと、ストリートビューで道案内が開始されます。これなら迷ってしまう人も少なくなるはず。</p>

<h4 class='tips'>道案内マップの作成手順
</h4>
<ol>
<li>まず、出発地と目的地を指定します。ここで正確に場所を指定したいならば緯度経度を入力すると確実です（※緯度経度取得のコツは後述）<br /><img src="http://web-marketing.zako.org/images/2010/10/directionsmap4.png" alt="出発地と到着地を指定" title="directionsmap4" width="400" height="160" class="aligncenter size-full wp-image-16259" /></li>
<li>出発地、目的地の指定に続き、今度はサービスサイト上でズームレベルや埋め込み地図のサイズを指定します<br /><img src="http://web-marketing.zako.org/images/2010/10/directionsmap5.png" alt="埋め込みサイズ" title="directionsmap5" width="375" height="180" class="aligncenter size-full wp-image-16260" /></li>
<li>次に、<b>「Region Code」に必ず ja と入力</b>します。それ以外は特に変更する必要はありません<br /><img src="http://web-marketing.zako.org/images/2010/10/directionsmap6.png" alt="マップ種類" title="directionsmap6" width="435" height="287" class="aligncenter size-full wp-image-16261" /></li>
<li>そして「Create Your Direction Map」ボタンを押すと、地図のプレビューと埋め込みタグが発行されます<br /><img src="http://web-marketing.zako.org/images/2010/10/directionsmap7.jpg" alt="マップ埋め込みタグ" title="directionsmap7" width="400" height="602" class="aligncenter size-full wp-image-16267" /></li>
<li>ここで道順をマウスドラッグで変更することも可能です<br /><img src="http://web-marketing.zako.org/images/2010/10/directionsmap1.png" alt="ドラッグで道順を変更" title="directionsmap1" width="400" height="175" class="aligncenter size-full wp-image-16263" /></li>
</ol>

<h4 class='tips'>設定時の日本語文字化けを回避するコツ</h4>
<p><img src="http://web-marketing.zako.org/images/2010/10/directionsmap7.png" alt="日本語文字化けエラー" title="directionsmap7" width="400" height="132" class="aligncenter size-full wp-image-16265" /></p>
<p>ここだけがちょっと残念ですが、日本語で地名を指定すると文字化けしてしまうため、緯度経度を指定する必要があります。そのコツをここで解説しましょう。</p>
<p><img src="http://web-marketing.zako.org/images/2010/10/directionsmap2.png" alt="この場所について" title="directionsmap2" width="400" height="245" class="aligncenter size-full wp-image-16257" /><br />↑まずGoogleマップを開き、目的地（あるいは出発地となる駅など）を右クリックして、コンテキストメニューの「この場所について」をクリック</p>

<p><img src="http://web-marketing.zako.org/images/2010/10/directionsmap3.png" alt="緯度経度" title="directionsmap3" width="400" height="56" class="aligncenter size-full wp-image-16258" /><br />↑するとGoogleマップの検索ボックスに右クリックした場所の緯度経度が表示されるので、それをコピーします。</p>

<p><img src="http://web-marketing.zako.org/images/2010/10/directionsmap4.png" alt="出発地と到着地を指定" title="directionsmap4" width="400" height="160" class="aligncenter size-full wp-image-16259" /><br />↑コピーした緯度経度を、サービスサイトの「Setting」欄でStart Address（出発地）、及びDestination Address（目的地）にそれぞれ貼りつければ正確に表示されます。</p>
<p>
興味のある方は<a class='web-site-link' href="http://tripgeo.com/DirectionsMap.aspx" target="_blank">Directions Map</a>へどうぞ。</p>
<p>今回のようなストリートビューを使ったサービスを見ると、これがカーナビになったらどれだけ便利なんだろうと感じさせられてしまいますよね。</p>
<p>せめてここだけでも、ガラパゴスは適応外でお願いしますm(_"_)m</p>
<p>Via:<a class='web-site-link' href="http://www.delicious.com/url/6c882abee01a7e33fa87894592aa3a6c" target="_blank">delicious</a></p>