iPhoneならiOS標準の地図アプリ、AndroidならGoogleマップアプリを起動して経路を表示する

OSを判定してiOS標準のマップアプリとGoogleマップアプリのどちらかを起動 Web

スマホサイトを作成していると、現在地から目的地までの経路 (道順) を、地図アプリを起動して表示したいといったケースは多いと思います。

ちょっと前までは、精度や使いやすさからGoogleマップアプリ一択でしたが、最近はiOS標準の「マップ」という地図アプリも優秀です。

iPhoneユーザーならiOS標準の地図アプリが最初からインストールされていて、普通は削除できないです。Androidは調べてないですが、多分Googleマップがインストールされているんじゃないでしょうかね。

そこで、以下の条件を満たすHTMLとJSを書いてみます。

  • iOS端末なのか、それ以外 (Android端末) なのかをユーザーエージェントで判定
  • iOSユーザー (iPhone、iPad) がアクセスした場合はiOS標準の地図アプリを起動
  • それ以外 (Androidユーザー) がアクセスした場合はGoogleマップアプリを起動
  • 更に、iOS以外の端末でGoogleマップアプリがインストールされていない場合は、ブラウザでGoogleマップを開いて経路を表示

尚、jQueryでリンク先を振り分けるので、GoogleのCDNをあらかじめ読み込んでおきます。

 

例)OSを判定して起動する地図アプリを切り替えて、スカイツリーまでの経路を表示する

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        var agent = navigator.userAgent;

        if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1){
        //iOSは標準のマップアプリ
            $("#js-access-map a").attr("href", "http://maps.apple.com/maps?saddr=&daddr=35.710432,139.80937199999994&z=16");
        }else{
        //iOS以外はGoogleマップアプリ
            $("#js-access-map a").attr("href", "http://maps.google.com/maps?saddr=&daddr=35.710432,139.80937199999994&z=16");
        }
    });
</script>
<p id="js-access-map"><a href="http://maps.google.com/maps?saddr=&daddr=35.710432,139.80937199999994&z=16"><i class="fa fa-map-marker fa-fw"></i>地図アプリで道順を見る</a></p>

hrefの中身はシンプルです。各パラメータはこんな感じ。

  • saddr…出発地点を座標や住所で指定します。現在地を指定したい場合は空でOK!
  • daddr…目的地を座標や住所で指定します。
  • z…ズーム値 (縮尺率) を指定します。0~19までの数値で、小さいほど広域な地図を表示。

あとは、jQueryで #js-access-map の中のa要素のhref属性の中身を変更しています。

本当は移動モードも指定して地図アプリを開かせたかったのですが、iframe使ってごにょごにょしたり、なんかすんごい大変そうだったのと、地図アプリさえ開いてしまえば、「徒歩 (walking) 」「車 (driving)」「公共交通機関 (transit)」のルート表示はワンタップで切り替えられるので、今回は作業時間と使いやすさのバランスを取って、こっちの方法でいいかということになりました。

地図アプリに遷移したら、ワンタップでナビがスタートしますのでとても便利ですよね。

 

iPhone、iPad、Androidのスマホやタブレット、Googleマップアプリのインストールあり、なしなどチェックは大変ですが・・・お試しくだされ。

 

▼デモはこちら

OSを判定して起動する地図アプリを切り替えて、スカイツリーまでの経路を表示する

コメント

タイトルとURLをコピーしました