ブログ

スマートフォン向けを含む地図へのリンクの動作検証
2020.05.15

RWD（レスポンシブ・ウェブ・デザイン）対応により、特にスマートフォンにおいて、ブラウザで表示されたページから地図アプリや地図ページを開きたい時、どのようなURLでリンクすればよいか、改めて確認したいと思いました。

そこで、iPhoneとAndroid端末からそれぞれ検証しましたのでご紹介します。

うまく地図アプリが起動できれば、そのまま経路検索などが行え、利便性が高まり、ウェブサイトとしても使いやすい印象に繋がります。

実際に以下のリンクについて、スマートフォンからアクセスして挙動をご確認いただけます。
なお、緯度・経度は「日立駅」となっています。

検証したデバイス
iPhone  : XR (iOS 13.3.1)
Android : UMIDIGI A5 Pro (Android OS 9)

iPhone端末からタップした場合の挙動
Appleの地図アプリが開き、すぐに現在地からの経路が検索できる状態になります。

Android端末からタップした場合の挙動
リダイレクトされてGoogleマップアプリが開き、すぐに現在地からの経路が検索できる状態になります。
ただし、マーカーが少しずれて表示されるうえ、地図が拡大されず、下記「(2) Googleの地図を開く」とは若干異なります。

パソコンからクリックした場合の挙動
リダイレクトされてGoogleマップのページが開き、すぐに現在地からの経路の検索などができる状態になります。
こちらはマーカー位置のずれはありません。

【技術サイト】 Developer Guide – developers.google.com
https://developers.google.com/maps/documentation/urls/guide
URLパラメータの「api=1」は特別な意味があり、固定なのでご注意ください。

iPhone端末からタップした場合の挙動
リダイレクトされてGoogleマップアプリが開き、すぐに現在地からの経路が検索できる状態になります。

Android端末からタップした場合の挙動
リダイレクトされてGoogleマップアプリが開き、すぐに現在地からの経路が検索できる状態になります。

パソコンからクリックした場合の挙動
Googleマップのページが開き、すぐに現在地からの経路の検索などができる状態になります。

【参考】 Googleマップアプリ指定して開く（iPhone専用方式）

iPhone端末からタップした場合の挙動
「”Google Maps”で開きますか？」と確認ダイアログが表示され、「開く」を押すとGoogleマップアプリが開き、現在地からの経路が検索された状態になります。

Android端末からタップした場合の挙動
リンクが作動しません。

パソコンからクリックした場合の挙動
リンクが作動しません。

デバイスに応じて次のように表示すればよいと考えます。

iPhone向け

上記の(1)と(2)を併記
Appleの地図アプリは端末の初期状態でインストール済みのため、リンクの表示が必要です。
Googleマップアプリは手動インストールが必要ですが、人気があり利用者数も多いと思われるので、リンクを表示します。

Andoroid向け

上記(2)のみを表示
Googleマップアプリは端末の初期状態でインストール済みのため、リンクの表示が必要です。
Appleの地図アプリはAndroid向けに提供がないため、そのリンクを非表示にしておきます。

パソコン向け

上記(2)のみを表示
アプリを使用しない前提でブラウザで利用できればよいので、アプリ向けのURLは非表示にしておきます。

なお、スマートフォン上で、地図アプリをすべて削除した状態での挙動の確認はおこなっておりません。
推測となりますが、リンクURLがHTTPSプロトコルですので、おそらくブラウザで開くと考えられます（アプリがインストールされていないパソコンからの挙動と同様）。

以上、お役に立てれば幸いです。