Bagaimana cara membuat tautan untuk semua perangkat seluler yang membuka peta google dengan rute mulai dari lokasi saat ini, menentukan tempat tertentu?

89

Saya agak berpikir ini tidak akan terlalu sulit untuk ditemukan tetapi tampaknya tidak mudah untuk menemukan artikel lintas perangkat yang luar biasa, seperti yang Anda harapkan.

Saya ingin membuat tautan yang membuka browser perangkat seluler dan menjelajahi google maps ATAU membuka aplikasi peta (Apple Maps atau Google Maps) dan langsung memulai rute, yaitu: mulai di lokasi saat ini, berakhir di titik tertentu ( lintang / bujur).

Saya dapat menguji pada dua perangkat (di samping browserstack), Android dan iPhone.

Tautan berikut hanya berfungsi di Android:

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

Mengklik tautan ini di Chrome iPhone, ini secara aneh membuka Google Maps dalam versi desktop dengan iklan di aplikasi seluler ...

Yang ini hanya berfungsi di iOS, membuka Apple Maps meminta saya untuk memasukkan lokasi awal (saya dapat memilih "Lokasi Saat Ini") dan memulai rute = perilaku yang diinginkan. Mengklik tautan ini sepenuhnya gagal di Android:

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

Perhatikan peta: // protocol.

Apakah ada cara lintas perangkat yang elegan untuk membuat tautan seperti itu? Satu tautan yang berfungsi di semua ponsel utama?

Terima kasih

UPDATE: Solusi ditemukan (agak)

Inilah yang saya dapatkan. Ini tidak seperti yang saya bayangkan, meskipun berhasil.

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)

yang maps://protokol adalah skema url untuk apel peta app, yang hanya akan mulai bekerja pada ios 6 atau lebih tinggi. Ada beberapa cara untuk menguji apakah gmaps diinstal dan kemudian memilih apa yang harus dilakukan dengan url, tetapi itu terlalu berlebihan untuk apa yang saya inginkan. Jadi saya akhirnya membuat peta: // ATAU tautan maps.google.com/, menggunakan parameter di atas.

** PEMBARUAN **

Sayangnya, $ .browser.device tidak berfungsi sejak jquery 1.9 (sumber - http://api.jquery.com/jquery.browser )

android  html  ios  google-maps  mobile 
— Alex
sumber
1
Bahasa sisi server apa yang Anda gunakan? Anda dapat mengatasi masalah ini dengan mengendus agen pengguna.
— Uooo
Saya tahu bahwa saya bisa, tetapi saya ingin membuat lintas browser itu. Saya memiliki PHP dan JS
— Alex
@Alex - Bagaimana Anda menerjemahkan ini untuk bekerja di desktop? Sehingga maps.google.comberfungsi di Android dan Desktop, dan maps:// di iOS.
— kaoscify
@ Alex - Saya terus mendapatkan pesan kesalahan yang mengatakan a(baris terakhir) tidak ditentukan. Saya memiliki URL di dalam infoWindow yang saya perlukan untuk mengubahnya tergantung pada perangkat yang digunakan.
— kaoscify
1
Saya menemukan bahwa tidak ada jawaban yang benar-benar berfungsi dengan baik dalam mendeteksi platform (bukan browser) jadi saya menemukan PgwBrowser , plugin jQuery yang mendeteksi platform (misalnya desktop, seluler), browser, dan bahkan OS. Ini juga> 2 KB, saat dikompresi dan di-gzip. Dengan itu, saya cukup memeriksa os.group dalam sebuah switchpernyataan dan merutekan browser yang sesuai.
— filoxo

Jawaban:

94

Uhmm, saya belum banyak bekerja dengan ponsel jadi saya tidak tahu apakah ini akan berhasil tetapi hanya dari sudut pandang html / javascript, bisakah Anda membuka url yang berbeda tergantung pada perangkat pengguna?

<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://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=[YOUR_LAT],[YOUR_LNG]");
    else
         window.open("https://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=[YOUR_LAT],[YOUR_LNG]");
}
— James
sumber
Jawaban Anda dan Alex Pretzlav adalah yang paling mendekati yang berhasil untuk saya, tetapi jawaban Anda lebih mengarah pada bagaimana tampilannya saat menggunakan javascript, terima kasih. saya akan memperbarui posting saya untuk memberikan solusi akhir
— Alex
1
Saya banyak meneliti ini sekitar setahun yang lalu dan dapat memberi tahu Anda bahwa menggunakan maps.apple.com/?q=Mexican+Restaurant akan mengarahkan ke halaman google (coba!) Dan dalam pengecualian di mana itu adalah perangkat yang memiliki aplikasi peta apel, itu akan membuka aplikasi itu sebagai gantinya. Untuk yang lainnya itu akan membuka aplikasi / halaman google maps. tolong.
— Layak7
Khususnya apa yang Anda cari adalah ini: maps.apple.com/?daddr=San+Francisco&dirflg=d&t=h Dan dokumentasinya ada di sini: developer.apple.com/library/content/featuredarticles/…
— Worthy7
@ Worthy7 rupanya, saya belum menguji, tetapi di android maps.apple.com/* akan mengarahkan ke situs web google maps, sedangkan maps.google.com/* akan memungkinkan Anda untuk memilih aplikasi peta asli.
— Yakobus
Saya akan sangat merekomendasikan menggunakan jawaban ini untuk membuka aplikasi peta pengguna di Android daripada halaman browser baru!
— PaulCo
24

Menariknya, http://maps.apple.comtautan akan terbuka langsung di Apple Maps pada perangkat iOS, atau dialihkan ke Google Maps sebaliknya (yang kemudian disadap pada perangkat Android), sehingga Anda dapat membuat URL yang cermat yang akan melakukan hal yang benar dalam kedua kasus menggunakan " URL Apple Maps seperti:

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

Atau, Anda dapat menggunakan url Google Maps secara langsung (tanpa /mapskomponen URL) untuk langsung membuka Google Maps pada perangkat Android, atau membuka di Web Seluler Google Maps pada perangkat iOS:

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

— Alex Pretzlav
sumber
1
Jadi saya mengambil ponsel Android saya, membuka browser web Google Chrome dan memasukkan URL http://maps.google.com/. Itu baru saja membuka URL ini di URL itu di browser web. Saya mengharapkannya untuk membuka aplikasi Google Maps . Apakah saya salah paham dengan apa yang Anda tulis di sini, Alex Pretzlav? ;-)
— Leo
3
@Leo Android menangani URL secara berbeda ketika dimasukkan langsung di browser vs mengklik tautan. Coba kirim email ke diri Anda sendiri URL peta google seperti maps.google.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA dan kemudian ketuk dari klien email Anda.
— Alex Pretzlav
Terima kasih @AlexPretzlav. Ya, mereka memiliki pekerjaan yang harus dilakukan di sana untuk menyelesaikan berbagai hal. Apakah ada standar yang muncul?
— Leo
1
Memposting ini sebagai URL sehingga saya dapat menguji di peta android saya .apple.com/?daddr=1600+Amphitheatre+Pkwy,+Mountain+View+CA URL di atas mengalihkan ke peta google (situs web) di android saya, sedangkan maps.google.commemungkinkan saya membuka sejumlah aplikasi arah berbeda di ponsel android saya.
— raphael
15

baru saja menemukan pertanyaan ini dan menemukan di sini semua jawaban saya mengambil beberapa kode di atas dan membuat fungsi js sederhana yang berfungsi di android dan iphone (mendukung hampir semua android dan iphones).

  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
          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];

      var protocol = 'http://';
      if (ver[0] >= 6) {
        protocol = 'maps://';
      }
      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>
— talsibony
sumber
10

Ini berfungsi untuk saya di semua perangkat [iOS, Android, dan Window Mobile 8.1].

Tidak terlihat seperti cara terbaik dengan cara apa pun ... tetapi tidak bisa lebih sederhana :)

<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

— deepakssn
sumber
Sangat bersih dan mudah. Uji di beberapa perangkat. Bekerja dengan lancar! Terima kasih banyak: D
— lzoesch
Tapi itu hanya membuka peta apel. Tidak terlalu keren jika Anda memiliki ponsel Android.
— superluminary
1
@Kristopher - Dan itu membuka aplikasi peta Google?
— superluminary
@superluminary memang anehnya.
— Kristopher
Bagaimana Anda menggunakan ini untuk meneruskan alamat alih-alih koordinat?
— Vincent
6 
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);
   }
 });
 });
 }
— Sudharsun
sumber
1
itu cara yang sangat keren untuk melakukannya, tapi tidak seperti yang saya minta. id lebih baik hanya ingin menambahkan sebuah anchor-tag, tidak lebih. jika tidak mungkin tanpa membuat peta google dengan rute itu sendiri, itu bagus untuk diketahui. terima kasih, Anda mendapatkan upvote!
— Alex
Oke beri tahu saya jika Anda mendapatkan solusi
— Sudharsun
2

Nah tidak, dari calon developer iOS, ada dua link yang saya tahu yang akan membuka aplikasi Maps di iPhone

Di iOS 5 dan lebih rendah: http://maps.apple.com?q=xxxx

Di iOS 6 dan lebih tinggi: http://maps.google.com?q=xxxx

Dan itu hanya di Safari. Chrome akan mengarahkan Anda ke halaman web Google Maps.

Selain itu, Anda harus menggunakan skema URL yang pada dasarnya mengalahkan tujuan tersebut karena tidak ada android yang akan mengetahui protokol itu.

Anda mungkin ingin tahu, Mengapa Safari membuka aplikasi Maps dan Chrome mengarahkan saya ke halaman web?

Nah, karena safari adalah build in browser buatan apple dan bisa mendeteksi URL diatas. Chrome adalah "hanya aplikasi lain" dan harus mematuhi Ekosistem iOS. Oleh karena itu, satu-satunya cara untuk berkomunikasi dengan aplikasi lain adalah dengan menggunakan skema URL.

— Segev
sumber
3
Seperti yang saya katakan, iOS mendeteksi peta: // protokol dan Android membuka Maps secara langsung melalui Lokasi Saat Ini tetapi menggunakan URL Google Maps yang umum, jadi apa yang Anda katakan kurang tepat ..
— Alex
1

Berdasarkan dokumentasi , originparameternya opsional dan defaultnya adalah lokasi pengguna.

... 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....

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

Bagi saya ini berfungsi di Desktop, iOS dan Android.

— Koni
sumber
1

Sintaks URL sama terlepas dari platform yang digunakan

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

Di Android atau iOS, URL meluncurkan Google Maps di aplikasi Maps, Jika aplikasi Google Maps tidak diinstal, URL meluncurkan Google Maps di browser dan melakukan tindakan yang diminta.

Di perangkat lain mana pun, URL meluncurkan Google Maps di browser dan melakukan tindakan yang diminta.

inilah tautan untuk dokumentasi resmi https://developers.google.com/maps/documentation/urls/guide

— Akshay Lebih
sumber
0

Saya menemukan bahwa ini berfungsi di seluruh papan:

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

Untuk desktop / laptop pengguna harus mengklik Petunjuk Arah saat peta itu dimuat, tetapi dari pengujian saya semua perangkat seluler akan memuat tautan itu di aplikasi Google Maps tanpa kesulitan.

— noakelstein
sumber
1
tapi bukan itu pertanyaannya :)
— Alex
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.