web-dev-qa-db-ja.com

現在の場所から出発し、特定の場所を宛先とするルートでGoogleマップを開くすべてのモバイルデバイス用のリンクを作成するにはどうすればよいですか？

私はむしろ、これを見つけるのはそれほど難しいことではないと思っていましたが、見たところ、あなたが期待するように、素晴らしいクロスデバイスの記事を見つけることは容易ではありません。

モバイルデバイスのブラウザを開き、Googleマップに移動するリンクを作成します。ORマップアプリ（Apple MapsまたはGoogle Maps）を開き、ルートを直接開始します。つまり、現在の場所から開始します。特定のポイント（緯度/経度）で終了します。

2つのデバイス（ブラウザースタックの横）、AndroidとiPhoneでテストできます。

次のリンクはAndroidでのみ機能します。

<a href="http://maps.google.com/maps?daddr=lat,long&amp;ll=">Take me there!</a>

IPhoneのChromeでこのリンクをクリックすると、モバイルアプリに広告が表示されるデスクトップバージョンのGoogleマップが奇妙に開きます...

これはiOSでのみ動作し、Apple Mapsを開いて開始場所（「現在の場所」を選択できます）を入力し、ルートを開始するように求められます=目的の動作。このリンクをクリックすると、Androidで完全に失敗します。

<a href="maps://maps.google.com/maps?daddr=lat,long&amp;ll=">Take me there!</a>

Maps：//プロトコルに注意してください。

そのようなリンクを作成するためのエレガントなクロスデバイスの方法はありますか？ すべての主要なモバイルで機能する1つのリンク？

ありがとう

更新：ソリューションが見つかりました（ちょっと）

これが私が思いついたものです。動作しているものの、私が想像したものとはまったく異なります。

var ua = navigator.userAgent.toLowerCase(),
    plat = navigator.platform,
    protocol = '',
    a,
    href;

$.browser.device = ua.match(/Android|webos|iphone|ipad|iPod|blackberry|iemobile|opera/i) ? ua.match(/Android|webos|iphone|ipad|iPod|blackberry|iemobile|opera/i)[0] : false;


if ($.browser.device) {
    switch($.browser.device) {
        case 'iphone':
        case 'ipad':
        case 'iPod':
            function iOSversion() {
              if (/iP(hone|od|ad)/.test(navigator.platform)) {
                // supports iOS 2.0 and later: <http://bit. ly/TJjs1V>
                var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
                return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
              }
            }

            var ver = iOSversion() || [0];

            if (ver[0] >= 6) {
              protocol = 'maps://';
            }
            else {
                protocol = 'http://maps.google.com/maps';
            }
        break;

        case 'Android':
        default:
            protocol = 'http://maps.google.com/maps';
        break;
    }

a.attr('href', protocol + href)

maps://プロトコルは、AppleマップアプリのURLスキームであり、iOS 6以降でのみ動作を開始します。 gmapsがインストールされているかどうかをテストしてから、URLをどうするかを選択する方法がありますが、それは私が意図したものには多すぎます。そのため、上記のパラメーターを使用して、maps：// OR maps.google.com/リンクを作成しました。

**更新**

悲しいことに、$。browser.deviceはjquery 1.9以降動作しません（ソース- http://api.jquery.com/jquery.browser ）

androidhtmliosgoogle-mapsmobile
79
Alex

うーん、私は電話であまり仕事をしていないので、これがうまくいくかどうかはわかりませんが、html/javascriptの観点から、ユーザーのデバイスが何であるかによって異なるURLを開くことができますか？

<a style="cursor: pointer;" onclick="myNavFunc()">Take me there!</a>

function myNavFunc(){
    // If it's an iPhone..
    if( (navigator.platform.indexOf("iPhone") != -1) 
        || (navigator.platform.indexOf("iPod") != -1)
        || (navigator.platform.indexOf("iPad") != -1))
         window.open("maps://maps.google.com/maps?daddr=lat,long&amp;ll=");
    else
         window.open("http://maps.google.com/maps?daddr=lat,long&amp;ll=");
}
79
James

興味深いことに、http://maps.Apple.comリンクはiOSデバイスのApple Mapsで直接開くか、そうでない場合はAndroidデバイスでインターセプトされるGoogle Mapsにリダイレクトします。次のような「Apple Maps」URLを使用して、どちらの場合でも正しいことをするURL：

http://maps.Apple.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA

または、GoogleマップのURLを（/maps URLコンポーネントなしで）直接使用して、AndroidデバイスのGoogleマップで直接開くか、iOSデバイスのGoogleマップのモバイルWebで開くことができます。

http://maps.google.com/?daddr=1+Infinite+Loop,+Cupertino+CA

19
Alex Pretzlav

この質問にぶつかり、上記のコードのいくつかを取り、Androidおよびiphone（ほとんどすべてのAndroidおよびiphoneをサポートする）で動作する簡単なjs関数を作成しました。 。

  function navigate(lat, lng) {
    // If it's an iPhone..
    if ((navigator.platform.indexOf("iPhone") !== -1) || (navigator.platform.indexOf("iPod") !== -1)) {
      function iOSversion() {
        if (/iP(hone|od|ad)/.test(navigator.platform)) {
          // supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
          var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
          return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
        }
      }
      var ver = iOSversion() || [0];

      if (ver[0] >= 6) {
        protocol = 'maps://';
      } else {
        protocol = 'http://';

      }
      window.location = protocol + 'maps.Apple.com/maps?daddr=' + lat + ',' + lng + '&amp;ll=';
    }
    else {
      window.open('http://maps.google.com?daddr=' + lat + ',' + lng + '&amp;ll=');
    }
  }

Html：

 <a onclick="navigate(31.046051,34.85161199999993)" >Israel</a>
12
talsibony

これはすべてのデバイス[iOS、AndroidおよびWindow Mobile 8.1]で機能します。

決して最良の方法のようには見えません...しかし、もっと簡単にすることはできません:)

<a href="bingmaps:?cp=18.551464~73.951399">
 <a href="http://maps.Apple.com/maps?q=18.551464, 73.951399"> 
   Open Maps
 </a>
</a>

http://jsbin.com/dibeq

9
deepakssn
if (navigator.geolocation) { //Checks if browser supports geolocation
navigator.geolocation.getCurrentPosition(function (position) {                                                                                            
 var latitude = position.coords.latitude;                    //users current
 var longitude = position.coords.longitude;                 //location
 var coords = new google.maps.LatLng(latitude, longitude); //Creates variable for map coordinates
 var directionsService = new google.maps.DirectionsService();
 var directionsDisplay = new google.maps.DirectionsRenderer();
 var mapOptions = //Sets map options
 {
   zoom: 15,  //Sets zoom level (0-21)
   center: coords, //zoom in on users location
   mapTypeControl: true, //allows you to select map type eg. map or satellite
   navigationControlOptions:
   {
     style: google.maps.NavigationControlStyle.SMALL //sets map controls size eg. zoom
   },
   mapTypeId: google.maps.MapTypeId.ROADMAP //sets type of map Options:ROADMAP, SATELLITE, HYBRID, TERRIAN
 };
 map = new google.maps.Map( /*creates Map variable*/ document.getElementById("map"),    mapOptions /*Creates a new map using the passed optional parameters in the mapOptions parameter.*/);
 directionsDisplay.setMap(map);
 directionsDisplay.setPanel(document.getElementById('panel'));
 var request = {
   Origin: coords,
   destination: 'BT42 1FL',
   travelMode: google.maps.DirectionsTravelMode.DRIVING
 };

 directionsService.route(request, function (response, status) {
   if (status == google.maps.DirectionsStatus.OK) {
     directionsDisplay.setDirections(response);
   }
 });
 });
 }
6
Sudharsun

いいえ、iOS開発者候補から、iPhoneでマップアプリを開くことがわかっている2つのリンクがあります

IOS 5以前の場合：http://maps.Apple.com?q=xxxx

IOS 6以降：http://maps.google.com?q=xxxx

そして、それはSafariでのみです。 Chromeは、GoogleマップのWebページに移動します。

それ以外は、Androidがそのプロトコルを認識しないため、基本的に目的に反するURLスキームを使用する必要があります。

あなたは、Safariがマップアプリを開き、Chromeがウェブページに誘導する理由を知りたいと思うかもしれません。

サファリはAppleによって作成されたブラウザのビルドであり、上記のURLを検出できるためです。 Chromeは「単なる別のアプリ」であり、iOSエコシステムに準拠する必要があります。そのため、他のアプリと通信する唯一の方法は、URLスキームを使用することです。

2
Segev

URL構文は、使用中のプラットフォームに関係なく同じです

String url = "https://www.google.com/maps/search/?api=1&query=" + latitude + ","+ 
longitude;

AndroidまたはiOSでは、URLはマップアプリでGoogleマップを起動します。Googleマップアプリがインストールされていない場合、URLはブラウザーでGoogleマップを起動し、要求されたアクションを実行します。

他のデバイスでは、URLはブラウザーでGoogleマップを起動し、要求されたアクションを実行します。

公式ドキュメントのリンクはこちら https://developers.google.com/maps/documentation/urls/guide

1
Akshay More

documentation に基づいて、Originパラメータはオプションであり、デフォルトでユーザーの場所になります。

... Defaults to most relevant starting location, such as user location, if available. If none, the resulting map may provide a blank form to allow a user to enter the Origin....

例：https://www.google.com/maps/dir/?api=1&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling

私にとって、これはデスクトップ、IOSおよびAndroidで動作します。

1
Koni

私はこれが全面的に機能することを発見しました：

<a href="https://www.google.com/maps/place/1+Fake+Street,+City+Province/State>Get Directions</a>

デスクトップ/ラップトップの場合、ユーザーはその地図が読み込まれたときに[ルート案内]をクリックする必要がありますが、私のテストから、すべてのモバイルデバイスは問題なくGoogleマップアプリにそのリンクを読み込みます。

0
noakelstein

シンプルなURL：

https://www.google.com/maps/dir/?api=1&destination=lat,lng

このURLはルーティング専用です。

リファレンス： https://developers.google.com/maps/documentation/urls/guide#directions-action

0
Khurshid Ansari