web-dev-qa-db-ja.com

モバイルブラウザーからナビゲーションを呼び出す方法はありますか？

Android/iphoneなどのデバイスからモバイルブラウザで開く非常に小さなHTML5/JavaScript Webサイトを開発しています。現在の場所を取得するためにHTML5の地理的位置を使用していますが、ある目的地に移動したいのですが、私が思いついたのは、ユーザーが以下のようなリンクをクリックすることでした。

https://maps.google.com/maps?saddr=london&daddr=paris

ただし、ナビゲーションアプリは開かず、モバイルのGoogleマップウェブサイトに切り替わります。 HTML5/javascriptを使用してナビゲーション（GPS）アプリを開く方法はありますか？このようなもの：

navigate:London to Paris
javascriptandroidhtmlgoogle-mapsnavigation
16
C graphics

Androidでナビゲーションリンクを使用してナビゲーションアプリを開くことができます。残念ながら、これはiOSではサポートされていません。ただし、iOSでは何も実行しないか、無効なリンクエラーが表示される可能性があるため、このリンクがデバイスでどのように処理されるかを直接制御することはできず、Android =この機能もサポートしていないデバイス。この機能がどこで機能するかは不明であり、ウェブサイトがこの機能に依存しないようにしてください。これは、この機能をサポートするデバイスの使いやすさの向上にすぎません。

1）ネイティブマップアプリでの場所の表示

Geoリンクを使用すると、次のような場所を指定できます。

geo:longitude,laditude

またはこのように：

geo:street+address

次のようなアドレスを検索することもできます。

geo:?q=street+address

次のようにズームレベルを定義することもできます。

geo:street+address?z=3

また、次のように複数のパラメータを組み合わせることもできます。

geo:?q=street+address&z=15

ただし、これが期待どおりに機能しないことに注意してください。この場合、Googleマップでは、定義されたズームレベルで開始し、ターゲットを拡大して検索を開始します。

ここ は、Androidのドキュメントです。

2）Googleマップでルートを開く

次のリンクを使用して、2つの場所間のルートを表示することもできます。

http://maps.google.com/maps?saddr=street+adress&daddr=street+address

そして座標もこれで動作します：

http://maps.google.com/maps?saddr=50,10&daddr=50,20

もう一度次のように使用できます。

<a href="http://maps.google.com/maps?saddr=New+York&daddr=San+Francisco">Route New York --> San Francisco</a>

3）ナビゲーションをすぐに開始します

このオプションを使用すると、リンクは場所へのルートを開き、デバイスはルートを表示するだけでなく、すぐにナビゲーションを開始します。

google.navigation:q=street+address

座標を使用することもできます：

google.navigation:q=50,10

次のように使用します。

<a href="google.navigation:q=San+Francisco">Navigation to San Francisco</a>

4）テスト

私は次のHTMLでAndroid 4.4（KitKat））を実行しているNexus 5ですべてをテストしました：

<!DOCTYPE html>
<html>

<head>
  <title>Geo Link Test</title>
</head>

<body>
  <p><a href="geo:50,10">Location 50/10</a></p>
  <p><a href="geo:Vienna">Location Vienna</a></p>
  <p><a href="geo:?z=5&q=New+York">Zoom 5, Search for New York</a></p>
  <p><a href="geo:?q=San+Francisco&z=15">Zoom 15, Search for San Francisco</a></p>
  <p><a href="google.navigation:q=San+Francisco">Navigation to San Francisco</a></p>
  <p><a href="google.navigation:q=50,10">Navigation to 50/10</a></p>
  <p><a href="http://maps.google.com/maps?saddr=New+York&daddr=San+Francisco">Route New York --> San Francisco</a></p>
  <p><a href="http://maps.google.com/maps?saddr=50,10&daddr=50,20">Route 50/10 --> 50/20</a></p>
</body>

</html>
49
Xaver Kapeller

たくさんのリンクテストの後、私はそれを私のために解決しました：

<a href="http://maps.google.com/maps?q=loc: <lat>,<lng>&navigate=yes">nav</a>

これは、ユーザーナビゲーションアプリの選択メニューを開いて、移動先のコードを渡します。

楽しい

10
David

この質問が最初に投稿されて回答されてから、2017年10月の時点で、Googleは Maps URL というAPIを開発しました。

これは、Googleマップを起動するためのユニバーサルなクロスプラットフォームURLです。

https://www.google.com/maps/dir/?api=1は、ナビゲーションを含めることができるマップのエンドポイントです。

次のパラメータを追加します。

  • 起源：&Origin=new+york
  • 宛先：&destination=san+fransisco
  • ナビゲーション：&dir_action=navigate

Originを省略した場合、デバイスの場所が検出されます。これはおそらくナビゲーションに適しています。

https://www.google.com/maps/dir/?api=1&destination=san+fransisco&dir_action=navigate

これはすぐにはナビゲーションを開きませんが、ページにナビゲーションアイコンが表示されているGoogleマップに移動し、ユーザーにアプリを使用するオプションを提供します（または、アプリがない場合はダウンロードします）。これは良い解決策のようです。ブラウザ、Google Pixel、iPhoneでテストしたところ、各モバイルデバイスで同じように動作しました。

その他の便利な機能については、残りのドキュメントをご覧ください： https://developers.google.com/maps/documentation/urls/guide

8
wlh