スマホで目的地のリンクを、現在地からの経路付きでGoogle mapアプリに渡す

こんな経験があると思います。
1. スマホでお店を検索
2. お店の位置情報を選択してコピー
3. マップアプリを開いて、コピペ
4. 現在地からの経路を検索

ハッキリ言ってめんどくさいですよね。UX的にどうなのよ？

それ、URLスキームでできるよ？

と思ったら、URLスキームで簡単に実装できたので、それのメモ

<a href="comgooglemaps://?daddr=目的地の緯度,目的地の軽度">目的地</a></li>

comgooglemaps://でGoogle mapアプリを立ち上げて、?daddr=で目的地の緯度経度を指定してあげます。
これだけで、リンクをクリック（タップ）すると、アプリが立ち上がって、経路選択画面が表示されます。
簡単！すてき！

ちょっと一工夫

これだと、間違ってタップしてしまった場合でもアプリに飛んでしまうので、ここをちょっと工夫します。

$(function(){
  $('a[href^=comgooglemaps://]').on('click', function(e){
    e.preventDefault();
      if(confirm('mapアプリへ移動します。よろしいですか？')) {
        location.href = $(this).attr('href');
      }
  })
})

a[href^=comgooglemaps://]でhrefが comgooglemaps://から始まるリンクを対象に、リンククリック時にアラートを出すようにしています。

ここで「はい」を押した場合、マップアプリに飛ぶようにしています。

これなら間違えて押してしまっても大丈夫ですね！

良かったら使ってみてください。