Wie öffnet man die Karten-App eines Mobilgeräts, wenn ein Benutzer auf einen Link klickt?

Ich habe eine Web-App, bei der ein Benutzer, wenn er auf einen Link klickt, eine Karte öffnen sollte. Die beste Lösung, die mir einfällt, besteht darin, eine neue Registerkarte / ein neues Fenster für Google Maps zu öffnen target="_blank" Attribut.

Aber ich denke das Öffnen Sie am besten die Karten-App des Geräts statt googlemap.

Ich weiß, dass Sie die Telefon-App des Benutzers öffnen können, wenn der Benutzer auf eine Telefonnummer klickt, auf die das href-Attribut zeigt tel:<the phone number>. Ich frage mich, ob dies auch mit der Karten-App möglich ist.

Gibt es eine Möglichkeit, einem Anchor-Tag zu erlauben, die Karten-App des Mobilgeräts zu öffnen, wenn der Benutzer darauf klickt?

Du kannst den … benutzen GEO-URI-Schema “geo:Breitengrad,Längengrad” angegeben durch RFC 5870 in einem Link wie z

<a href="geo:124.028582,-29.201930" target="_blank">Click here for map</a>

Es gibt auch die comgooglemaps:wodurch die gestartet wird Google Maps-App für iOSzum Beispiel:

comgooglemaps://?center=40.765819,-73.975866&zoom=14&views=traffic

Woher

• center: Dies ist der Mittelpunkt des Kartenansichtsfensters. Als kommagetrennte Zeichenfolge formatiert latitude,longitude.
• mapmode: Legt die Art der angezeigten Karte fest. Kann eingestellt werden auf: standard oder streetview. Wenn nicht angegeben, werden die aktuellen Anwendungseinstellungen verwendet.
• views: Schaltet bestimmte Ansichten ein/aus. Kann eingestellt werden auf: satellite, trafficoder transit. Mehrere Werte können mit einem Komma-Trennzeichen gesetzt werden. Wenn der Parameter ohne Wert angegeben wird, werden alle Ansichten gelöscht.
• zoom: Gibt die Zoomstufe der Karte an.

Und wie Techtheatre sagte, können Sie einen normalen Apple Maps-Link verwenden, um Apple Maps auszulösen:

//maps.apple.com/?q=Raleigh,NC

Wenn Sie das Protokoll weglassen, wird automatisch das richtige ausgewählt. Wenn Sie also einen dynamischen Link haben möchten, können Sie einfach einen bedingten Code erstellen, der den Link zwischen ändert google.com und apple.com je nachdem auf welchem ​​System du bist.

Eigentlich … jetzt, da Apple eine eigene Kartenanwendung hat, fangen sie keine Google Maps-Links mehr und leiten sie an die Kartenanwendung weiter (standardmäßig … obwohl dies auf dem Gerät geändert werden kann). Daher müssen Sie jetzt etwas schnüffeln, um festzustellen, ob es sich bei dem Gerät um Android oder Apple handelt. Wenn Sie den richtigen Link für das richtige mobile Betriebssystem verwenden, erfasst das Gerät die Absicht und wechselt statt zur Verwendung des Browsers zur Karten-App.

Wenn Android, Link wie folgt:

https://maps.google.com/?q=Houston,+TX

Wenn Apple, Link wie folgt:

http://maps.apple.com/?q=Houston,+TX

Dies ist sicherlich ein Problem, und hoffentlich wird das W3c irgendwann einen Map-Trigger standardisieren (wie tel: für Telefonnummern). Viel Glück!

Keine Notwendigkeit für etwas Besonderes. Du kannst die Adresse einfach so doppelt verlinken.

<a href="https://maps.google.com/?q=addressgoeshere">
  <a href="https://maps.apple.com/maps?q=addressgoeshere">
    Address</a></a>

Auf Android öffnet dies die Google Maps App und auf iOS öffnet dies die Apple Maps App. (Ungetestet auf Windows Phone)

Hier ist meine jQuery-Lösung für dieses Problem. Ich wollte in der Lage sein, die richtige Karte zum Öffnen zu erkennen. Im Jahr 2019 stellen Mikroformate immer noch nicht automatisch eine Verbindung für Mobiltelefone her.

Ich habe die Lösung aus diesem Artikel verwendet https://medium.com/@colinlord/opening-native-map-apps-from-the-mobile-browser-afd66fbbb8a4 aber modifiziert, um es aktuell und dynamisch zu machen.

Und ich habe den Code so geändert, dass ich einen Adressblock in meinem HTML haben könnte. Diese Adresse wird auf die Grundlagen reduziert und an die entsprechende Karten-App gesendet.

HTML

<span class="map-link">6555 Hollywood Blvd<br/>Hollywood, CA 90028</span>

JavaScript

$(document).on('click','.map-link',function() {
    var address = $(this).html();
    address = $('<div/>')
      .html(address)
      .text() // strip tags
      .replace(/\s\s+/g, " "); // remove spaces
    address = encodeURIComponent(address);
    if ((navigator.platform.indexOf('iPhone') != -1) || (navigator.platform.indexOf('iPad') != -1) || (navigator.platform.indexOf('iPod') != -1)){/* if we're on iOS, open in Apple Maps */
        window.open('http://maps.apple.com/?q=' + address);
    } else { /* else use Google */
        window.open('https://maps.google.com/maps?q=' + address);
    }
});

CSS

.map-link { text-decoration: underline; text-decoration-style: dotted;cursor: pointer ;}
.map-link:hover { text-decoration-style:solid;}

Im 2020 Verwenden Sie diese Subdomains: https://maps.app.goo.gl/pQAhDLJDNaYQJ9Np7

Sie können es von Ihrem bekommen Karten-App wenn Sie den Ort teilen.

Funktioniert auf Browser/Android/Iphone

Ich nehme hier an einer alten Party teil. Allerdings habe ich 2021 immer noch damit zu kämpfen: D

Es scheint, dass mit dem folgenden Link

http://maps.apple.com/?q=Houston,+TX

Öffnet Apple Maps auf Apple-Geräten und Google Maps auf Nicht-Apple-Geräten. Danke Apfel!

Dieser einfache Link funktioniert bei mir hervorragend

<a href="https://www.google.com/maps/place/{{device?.gps_lat}},{{device?.gps_long}}" target="_blank">