JavaScript

ルート検索(道案内)とGoogleストリートビュー連携

Googleストリートビューが提供開始されたのは随分前の話になりますが、当時は普段行けない海外の風景が気軽に見られるようになり興奮した事を覚えています。
その後、対応エリアが順次拡大され、日本国内がストリートビューに対応した事でより身近な存在となりました。

さて、そんなストリートビューですが、通常のGoogleマップと同時表示(比較)できない事を残念に感じていました。
そこでGoogleMapsAPIを使って、ルート検索と連携してストリートビューを表示可能としました。

まだまだ課題がありますので、後述しますが、当初の目的である「同時表示」は一定の形になったのではと思います。

デモ

デモページを作成しましたので、以下リンクよりご覧ください。

仕様・課題

GeolocationAPIの精度

出発地はGeolocationAPIを使って、現在地を自動取得するようにしています。
GPS搭載のモバイル端末では、ある程度正確な位置(市区町村まで)が取得可能ですが、
GPS非搭載のデスクトップ端末では、見当外れな位置(都道府県程度)しか取得できません。

また、モバイル端末でも検証を行った初代iPadとiPhone 4Sでは後者の方が精度が高い、といった結果となりました。

ストリートビュー未対応エリアの処理

ストリートビューの対応エリアは、幹線道路を中心とした特定のエリアに限られます。
未対応エリアを検索した場合は「指定の場所から最も近い地点」を表示しています。
この最も近い地点が、あまりにも遠いと参考にならないため、いっその事表示しないといった割り切りが必要。

ルート検索以外への対応

現状はルート検索のみ対応(出発地、目的地ともに入力必須)のため、(通常のGoogleマップのような)目的地のみの入力でも検索可能とする。

カーナビ連携の強化

本家Googleルート検索に存在する機能で、個人的に便利と感じている目的地のカーナビ送信への対応。
カーナビで中々ヒットしないような目的地を探すときや、前日に候補を数カ所ピックアップしてカーナビに送信しておくといった使い方ができます。

スマートフォン対応

最終的に、1コンテンツとしてサイトへ組み込むことを目標としているため、UIを横幅700pxを想定して作成しています。
そのため、viewportをwidth=device-widthと設定している一般的なスマホサイトでは使い勝手が悪いです。

現状デモページでは、width=device-widthの設定を外し、通常のPC表示の縮小版としています。
そうすることで、全体が見えるようになりますが、入力欄(input)にフォーカスした際に
(モバイルブラウザの機能で)自動ズームされてしまい、これまた使い勝手が悪いです。

上記自動ズームは、調べた範囲では無効化することが出来ないようです(user-scalable=noは除く)。
只、ズーム率はフォントサイズとviewportのwidth/initial-scale辺りから算出されている?ようなので、
フォントサイズを調整してある程度のところで妥協することは可能です。

HTML5を導入した制作の依頼・ご質問など、お気軽にお問合せください

※(株)インフォマークのお問合せフォームへ移動します。